Criar modelos de fragmentos de conteúdo create-content-fragment-models

Este capítulo aborda as etapas para criar cinco modelos de fragmento de conteúdo:

  • Informações de contato
  • Endereço
  • Pessoa
  • Local
  • Equipe

Os modelos de fragmento de conteúdo permitem definir relações entre tipos de conteúdo e manter essas relações como esquemas. Use referências de fragmento aninhadas, vários tipos de dados de conteúdo e o tipo de guia para organização visual do conteúdo. Tipos de dados mais avançados, como espaços reservados para guias, referências de fragmentos, objetos JSON e o tipo de dados data e hora.

Este capítulo também aborda como aprimorar as regras de validação para referências de conteúdo, como imagens.

Pré-requisitos prerequisites

Este é um tutorial avançado. Antes de continuar com este capítulo, verifique se você concluiu o configuração rápida. Certifique-se de ler também o anterior visão geral capítulo para obter mais informações sobre a configuração do tutorial avançado.

Objetivos objectives

  • Criar modelos de fragmento de conteúdo.
  • Adicione espaços reservados em guias, data e hora, objetos JSON, referências de fragmento e referências de conteúdo aos modelos.
  • Adicione validação às referências de conteúdo.

Visão geral do modelo de fragmento de conteúdo content-fragment-model-overview

O vídeo a seguir fornece uma breve introdução aos modelos de fragmento de conteúdo e como eles são usados neste tutorial.

Criar modelos de fragmentos de conteúdo create-models

Vamos criar alguns modelos de fragmento de conteúdo para o aplicativo WKND. Se você precisar de uma introdução básica à criação de modelos de fragmento de conteúdo, consulte o capítulo apropriado no tutorial básico.

  1. Navegue até Ferramentas > Geral > Modelos de fragmentos do conteúdo.

    Caminho dos modelos de fragmento de conteúdo

  2. Selecionar WKND compartilhado para visualizar a lista de modelos de fragmento de conteúdo existentes para o site.

Modelo de informações de contato contact-info-model

Em seguida, crie um modelo que contenha as informações de contato de uma pessoa ou local.

  1. Selecionar Criar no canto superior direito.

  2. Forneça ao modelo um título de "Informações de contato" e selecione Criar. No modal de sucesso exibido, selecione Abertura para editar o modelo recém-criado.

  3. Comece arrastando um Texto em linha única no modelo. Dê a ele um Rótulo do campo de "Telefone" na Propriedades guia. O nome da propriedade é preenchido automaticamente como phone. Marque a caixa de seleção para criar o campo Obrigatório.

  4. Navegue até a Tipos de dados e adicionar outro Texto em linha única abaixo do campo "Telefone". Dê a ele um Rótulo do campo de "Email" e também o defina como Obrigatório.

O Adobe Experience Manager vem com alguns métodos de validação integrados. Esses métodos de validação permitem adicionar regras de governança a campos específicos nos modelos de fragmento de conteúdo. Nesse caso, vamos adicionar uma regra de validação para garantir que os usuários só possam inserir endereços de email válidos ao preencher esse campo. No Tipo de validação selecione E-mail.

O modelo completo de fragmento de conteúdo deve ser semelhante a:

Caminho do modelo de informações de contato

Depois de concluído, selecione Salvar para confirmar as alterações e fechar o Editor de modelos de fragmentos de conteúdo.

Modelo de endereço address-model

Em seguida, crie um modelo para um endereço.

  1. No WKND compartilhado, selecione Criar no canto superior direito.

  2. Insira um título de "Endereço" e selecione Criar. No modal de sucesso exibido, selecione Abertura para editar o modelo recém-criado.

  3. Arraste e solte uma Texto em linha única no modelo e forneça a ele um Rótulo do campo de "Endereço". O nome da propriedade é preenchido como streetAddress. Selecione o Obrigatório caixa de seleção

  4. Repita as etapas acima e adicione mais quatro campos de "Texto de linha única" ao modelo. Use os seguintes rótulos:

    • Cidade
    • Estado
    • Código postal
    • País
  5. Selecionar Salvar para salvar as alterações no modelo de Endereço.

    O modelo de fragmento "Endereço" concluído deve ter esta aparência:
    Modelo de endereço

Modelo de pessoa person-model

Em seguida, crie um modelo que contenha informações sobre uma pessoa.

  1. No canto superior direito, selecione Criar.

  2. Dê ao modelo um título de "Pessoa" e selecione Criar. No modal de sucesso exibido, selecione Abertura para editar o modelo recém-criado.

  3. Comece arrastando um Texto em linha única no modelo. Dê a ele um Rótulo do campo de "Nome completo". O nome da propriedade é preenchido automaticamente como fullName. Marque a caixa de seleção para criar o campo Obrigatório.

    Opções de nome completo

  4. Os modelos de fragmento de conteúdo podem ser consultados em outros modelos. Navegue até a Tipos de dados e arraste e solte a guia Referência do fragmento e forneça um rótulo de "Contact Info".

  5. No Propriedades , no menu Modelos de fragmentos do conteúdo permitido , selecione o ícone de pasta e escolha o Informações de contato modelo de fragmento criado anteriormente.

  6. Adicionar um Referência de conteúdo e dê a ele um Rótulo do campo de "Foto do perfil". Selecione o ícone de pasta em Caminho raiz para abrir a modal de seleção de caminho. Selecione um caminho raiz selecionando conteúdo > Assets e marcando a caixa de seleção de WKND compartilhado. Use o Selecionar botão na parte superior direita para salvar o caminho. O caminho do texto final deve ser lido /content/dam/wknd-shared.

    Caminho raiz da referência de conteúdo

  7. Em Aceitar apenas tipos de conteúdo especificados, selecione "Imagem".

    Opções de imagem do perfil

  8. Para limitar o tamanho e as dimensões do arquivo de imagem, vamos ver algumas opções de validação para o campo de referência de conteúdo.

    Em Aceitar apenas o tamanho de arquivo especificado, selecione "Menor que ou igual a" e campos adicionais aparecerão abaixo.
    Aceitar apenas o tamanho de arquivo especificado

  9. Para Máx, digite "5" e para Selecionar unidade, selecione "Megabytes (MB)". Essa validação permite que apenas imagens do tamanho especificado sejam escolhidas.

  10. Em Aceitar apenas a largura de imagem especificada, selecione "Largura máxima". No Máximo (pixels) que for exibido, digite "10000". Selecione as mesmas opções para Aceitar apenas uma altura de imagem especificada.

    Essas validações garantem que as imagens adicionadas não excedam os valores especificados. Agora, as regras de validação se parecem com o seguinte:

    Regras de validação de referência de conteúdo

  11. Adicionar um Texto multilinha e dê a ele um Rótulo do campo de "Biografia". Deixe a Tipo padrão como a opção padrão "Rich Text".

    Opções de biografia

  12. Navegue até a Tipos de dados e arraste uma Enumeração campo abaixo de "Biografia". Em vez do padrão Renderizar como selecione Lista suspensa e dê a ele um Rótulo do campo do "Nível de experiência do professor". Informe uma seleção de opções de nível de experiência do professor, como Especialista, avançado, intermediário.

  13. Em seguida, arraste outro Enumeração campo em "Nível de experiência do professor" e escolha "caixas de seleção" no campo Renderizar como opção. Dê a ele um Rótulo do campo de "Competências". Entre em diferentes habilidades, como escalada, surf, ciclismo, esqui e mochila. O rótulo da opção e o valor da opção devem corresponder conforme abaixo:

    Enumeração de habilidades

  14. Por último, crie um rótulo de campo "Detalhes do administrador" usando um Texto multilinha campo.

Selecionar Salvar para confirmar as alterações e fechar o Editor de modelos de fragmentos de conteúdo.

Modelo de localização location-model

O próximo modelo de fragmento de conteúdo descreve um local físico. Esse modelo usa espaços reservados em guias. Os espaços reservados para guias ajudam a organizar os tipos de dados no editor de modelo e o conteúdo no editor de fragmento, respectivamente, categorizando o conteúdo. Cada espaço reservado cria uma guia, semelhante a uma guia em um navegador da Internet, no editor de Fragmento de conteúdo. O modelo de Localização deve ter duas guias: Detalhes da localização e Endereço da localização.

  1. Como anteriormente, selecione Criar para criar outro modelo de fragmento de conteúdo. Para o Título do modelo, digite "Local". Selecionar Criar seguido por Abertura no modal de sucesso exibido.

  2. Adicionar um Espaço reservado da guia ao modelo e rotule-o como "Detalhes de localização".

  3. Arraste e solte uma Texto em linha única e rotule-o como "Nome". Abaixo deste rótulo de campo, adicione um texto multilinha e rotule-o como "Descrição".

  4. Em seguida, adicione um Referência do fragmento e rotule-o como "Informações de contato". Na guia Propriedades, em Modelos de fragmentos do conteúdo permitido, selecione o Ícone de pasta e escolha o modelo de fragmento "Informações de contato" criado anteriormente.

  5. Adicionar um Referência de conteúdo em "Informações de contato". Rotule-o como "Imagem de localização". A variável Caminho raiz deve ser /content/dam/wknd-shared. Em Aceitar apenas tipos de conteúdo especificados, selecione "Imagem".

  6. Vamos também adicionar um Objeto JSON sob a "Imagem do local". Como esse tipo de dados é flexível, ele pode ser usado para exibir quaisquer dados que você deseja incluir no conteúdo. Nesse caso, o objeto JSON é usado para exibir informações sobre o tempo. Rotule o objeto JSON "Clima por temporada". No Propriedades , adicionar um Descrição portanto, fica claro para o usuário quais dados devem ser inseridos aqui: "Dados JSON sobre o clima no local do evento por estação (primavera, verão, outono, inverno)".

    Opções de objeto JSON

  7. Para criar a guia Endereço do local, adicione um Espaço reservado da guia ao modelo e rotule-o como "Endereço do local".

  8. Arraste e solte uma Referência do fragmento e na guia de propriedades, rotule-o como "Endereço" e, em Modelos de fragmentos do conteúdo permitido, selecione o Endereço modelo.

  9. Selecionar Salvar para confirmar as alterações e fechar o Editor de modelos de fragmentos de conteúdo. O modelo de Localização concluído deve aparecer conforme abaixo:

    Opções de referência de conteúdo

Modelo da equipe team-model

Finalmente, crie um modelo que descreva uma equipe de pessoas.

  1. No WKND compartilhado selecione Criar para criar outro modelo de fragmento de conteúdo. Para o Título do modelo, digite "Equipe". Como anteriormente, selecione Criar seguido por Abertura no modal de sucesso exibido.

  2. Adicionar um Texto multilinha ao formulário. Em Rótulo do campo, digite "Descrição".

  3. Adicionar um Data e hora ao modelo e rotule-o como "Data de fundação da equipe". Nesse caso, mantenha o padrão Tipo defina como "Date", mas observe que também é possível usar "Date & Time" ou "Time".

    Opções de data e hora

  4. Navegue até a Tipos de dados guia. Abaixo da "Data de fundação da equipe", adicione uma Referência do fragmento. No Renderizar como selecione "vários campos". Para Rótulo do campo, digite "Membros da equipe". Este campo está vinculado à Person modelo criado anteriormente. Como o tipo de dados é um multicampo, vários fragmentos de Pessoa podem ser adicionados, permitindo a criação de uma equipe de pessoas.

    Opções de referência do fragmento

  5. Em Modelos de fragmentos do conteúdo permitido, use o ícone de pasta para abrir a modal Selecionar caminho e selecione a Person modelo. Use o Selecionar botão para salvar o caminho.

    Selecionar modelo de pessoa

  6. Selecionar Salvar para confirmar as alterações e fechar o Editor de modelos de fragmentos de conteúdo.

Adicionar referências de fragmento ao modelo de aventura fragment-references

Semelhante à forma como o modelo Equipe tem uma referência de fragmento para o modelo Pessoa, os modelos Equipe e Localização devem ser referenciados a partir do modelo Aventura para exibir esses novos modelos no aplicativo WKND.

  1. No WKND compartilhado selecione a Aventura e selecione Editar no início da navegação.

    Caminho de edição de aventura

  2. Na parte inferior do formulário, abaixo de "O que trazer", adicione uma Referência do fragmento campo. Insira um Rótulo do campo de "Localização". Em Modelos de fragmentos do conteúdo permitido, selecione o Localização modelo.

    Opções de referência do fragmento de localização

  3. Adicionar mais um Referência do fragmento e rotule-o como "Equipe do professor". Em Modelos de fragmentos do conteúdo permitido, selecione o Equipe modelo.

    Opções de referência do fragmento da equipe

  4. Adicionar outro Referência do fragmento e rotule-o como "Administrador".

    Opções de referência de fragmento do administrador

  5. Selecionar Salvar para confirmar as alterações e fechar o Editor de modelos de fragmentos de conteúdo.

Práticas recomendadas best-practices

Existem algumas práticas recomendadas relacionadas à criação de modelos de fragmento de conteúdo:

  • Criar modelos que mapeiam para componentes UX. Por exemplo, o aplicativo WKND tem modelos de fragmento de conteúdo para aventuras, artigos e localização. Você também pode adicionar cabeçalhos, promoções ou isenções de responsabilidade. Cada um desses exemplos compõe um componente UX específico.

  • Crie o menor número de modelos possível. Limitar o número de modelos permite maximizar a reutilização e simplificar o gerenciamento de conteúdo.

  • Aninhe os modelos de fragmento de conteúdo tão profundamente quanto necessário, mas somente conforme necessário. Lembre-se de que o aninhamento é realizado com referências de fragmento ou de conteúdo. Considere um máximo de cinco níveis de aninhamento.

Parabéns. congratulations

Parabéns! Agora você adicionou guias, usou os tipos de dados de objeto data e hora e JSON e aprendeu mais sobre referências de fragmento e conteúdo. Você também adicionou regras de validação de referência de conteúdo.

Próximas etapas next-steps

O próximo capítulo desta série criação de fragmentos de conteúdo a partir dos modelos criados neste capítulo. Saiba como usar os tipos de dados introduzidos neste capítulo e criar políticas de pasta para limitar quais modelos de fragmento de conteúdo podem ser criados em uma pasta de ativos.

Embora seja opcional para este tutorial, publique todo o conteúdo em situações de produção reais. Para obter uma revisão dos ambientes Autor e Publicação no AEM, consulte o
Série de vídeos AEM Headless e GraphQL.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4