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 a instalação rápida. Leia também o capítulo visão geral anterior 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.
-
Navegue até Ferramentas > Geral > Modelos de fragmentos de conteúdo.
-
Selecione WKND Compartilhado para exibir 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.
-
Selecione Criar no canto superior direito.
-
Dê ao modelo um título de "Informações de Contato" e selecione Criar. No modal de sucesso exibido, selecione Abrir para editar o modelo recém-criado.
-
Comece arrastando um campo de Texto de linha única para o modelo. Atribua a ele o Rótulo do Campo de "Telefone" na guia Propriedades. O nome da propriedade é preenchido automaticamente como
phone. Marque a caixa de seleção para tornar o campo Obrigatório. -
Navegue até a guia Tipos de Dados e adicione outro campo Texto de linha única abaixo do campo "Telefone". Atribua a ele o Rótulo do campo de "Email" e também defina-o 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. Na lista suspensa Tipo de Validação, selecione Email.
O modelo completo de fragmento de conteúdo deve ser semelhante a:
Depois de concluído, selecione Salvar para confirmar as alterações e fechar o Editor de modelo de fragmento de conteúdo.
Modelo de endereço address-model
Em seguida, crie um modelo para um endereço.
-
No WKND Compartilhado, selecione Criar no canto superior direito.
-
Insira um título de "Endereço" e selecione Criar. No modal de sucesso exibido, selecione Abrir para editar o modelo recém-criado.
-
Arraste e solte um campo Texto de linha única no modelo e atribua a ele o Rótulo do campo de "Endereço". O nome da propriedade é preenchido como
streetAddress. Marque a caixa de seleção Obrigatório. -
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
-
Selecione 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 pessoa person-model
Em seguida, crie um modelo que contenha informações sobre uma pessoa.
-
No canto superior direito, selecione Criar.
-
Dê ao modelo um título de "Pessoa" e selecione Criar. No modal de sucesso exibido, selecione Abrir para editar o modelo recém-criado.
-
Comece arrastando um campo de Texto de linha única para o modelo. Atribua a ele o Rótulo do campo de "Nome completo". O nome da propriedade é preenchido automaticamente como
fullName. Marque a caixa de seleção para tornar o campo Obrigatório.
-
Os modelos de fragmento de conteúdo podem ser consultados em outros modelos. Navegue até a guia Tipos de dados, arraste e solte o campo Referência de fragmento e atribua a ele o rótulo "Informações de contato".
-
Na guia Propriedades, no campo Modelos de fragmento de conteúdo permitidos, selecione o ícone de pasta e escolha o modelo de fragmento Informações de contato criado anteriormente.
-
Adicione um campo Referência de Conteúdo e forneça a ele o Rótulo do Campo da "Imagem 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 botão Selecionar na parte superior direita para salvar o caminho. O caminho do texto final deve ser
/content/dam/wknd-shared.
-
Em Aceitar somente tipos de conteúdo especificados, selecione "Imagem".
-
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.
-
Para Máx, digite "5" e para Selecionar Unidade, selecione "Megabytes (MB)". Essa validação permite que apenas imagens do tamanho especificado sejam escolhidas.
-
Em Aceitar apenas a largura de imagem especificada, selecione "Largura Máxima". No campo Máx. (pixels) 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:
-
Adicione um campo Texto de várias linhas e dê a ele um Rótulo do Campo de "Biografia". Deixe a lista suspensa Tipo padrão como a opção padrão de "Rich Text".
-
Navegue até a guia Tipos de Dados e arraste um campo Enumeração abaixo de "Biografia". Em vez da opção padrão Renderizar como, selecione Lista suspensa e atribua a ela o Rótulo do campo de "Nível de experiência do professor". Insira uma seleção de opções de nível de experiência do professor, como Especialista, Avançado, Intermediário.
-
Em seguida, arraste outro campo Enumeração em "Nível de Experiência do Professor" e escolha "caixas de seleção" na opção Renderizar como. Atribua a ele o Rótulo do campo de "Habilidades". 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:
-
Por fim, crie um rótulo de campo "Detalhes do administrador" usando um campo Texto de várias linhas.
Selecione Salvar para confirmar as alterações e fechar o Editor de modelo de fragmento 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.
-
Como anteriormente, selecione Criar para criar outro modelo de fragmento de conteúdo. Para o Título do modelo, digite "Local". Selecione Criar seguido de Abrir no modal bem-sucedido que aparece.
-
Adicione um campo Espaço reservado de guia ao modelo e rotule-o como "Detalhes de localização".
-
Arraste e solte um Texto de linha única e rotule-o como "Nome". Abaixo deste rótulo de campo, adicione um campo texto multilinha e rotule-o como "Descrição".
-
Em seguida, adicione um campo Referência de fragmento e rotule-o como "Informações de contato". Na guia de propriedades, em Modelos de fragmento de conteúdo permitidos, selecione o ícone de pasta e escolha o modelo de fragmento "Informações de contato" criado anteriormente.
-
Adicione um campo Referência de conteúdo em "Informações de contato". Rotule-o como "Imagem de localização". O Caminho Raiz deve ser
/content/dam/wknd-shared.em Aceitar somente tipos de conteúdo especificados, selecione "Imagem". -
Também vamos adicionar um campo 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". Na guia Propriedades, adicione uma Descrição para que fique claro para o usuário quais dados devem ser inseridos aqui: "Dados JSON sobre o clima do local do evento por estação (primavera, Verão, outono, inverno)."
-
Para criar a guia Endereço do local, adicione um campo Espaço reservado de guia ao modelo e rotule-o como "Endereço do local".
-
Arraste e solte um campo Referência de fragmento e, na guia de propriedades, rotule-o como "Endereço" e, em Modelos de fragmento de conteúdo permitidos, selecione o modelo Endereço.
-
Selecione Salvar para confirmar as alterações e fechar o Editor de modelo de fragmento de conteúdo. O modelo de Localização concluído deve aparecer conforme abaixo:
Modelo da equipe team-model
Finalmente, crie um modelo que descreva uma equipe de pessoas.
-
Na página 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 de Abrir no modal bem-sucedido exibido.
-
Adicione um campo de Texto de várias linhas ao formulário. Em Rótulo do campo, digite "Descrição".
-
Adicione um campo Data e Hora ao modelo e rotule-o como "Data de Fundação da Equipe". Nesse caso, mantenha o Type padrão definido como "Date", mas observe que também é possível usar "Date & Time" ou "Time".
-
Navegue até a guia Tipos de Dados. Abaixo da "Data de Fundação da Equipe", adicione uma Referência de fragmento. Na lista suspensa Renderizar como, selecione "vários campos". Para Rótulo do Campo, digite "Membros da Equipe". Este campo está vinculado ao modelo Pessoa 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.
-
Em Modelos de fragmento de conteúdo permitidos, use o ícone de pasta para abrir a modal Selecionar caminho e selecione o modelo Pessoa. Use o botão Selecionar para salvar o caminho.
-
Selecione Salvar para confirmar as alterações e fechar o Editor de modelo de fragmento 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.
-
Na página WKND Compartilhado, selecione o modelo Aventura e selecione Editar na navegação superior.
-
Na parte inferior do formulário, abaixo de "O que trazer", adicione um campo Referência de fragmento. Insira um Rótulo de campo de "Localização". Em Modelos de fragmento de conteúdo permitidos, selecione o modelo Localização.
-
Adicione mais um campo Referência de fragmento e rotule-o como "Equipe do professor". Em Modelos de fragmento de conteúdo permitidos, selecione o modelo Equipe.
-
Adicione outro campo Referência de fragmento e rotule-o como "Administrador".
-
Selecione Salvar para confirmar as alterações e fechar o Editor de modelo de fragmento 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 abordará 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 do Author e do Publish no AEM, consulte o
Séries de vídeos AEM Headless e GraphQL.