Visão geral do Sistema de módulos

Compreender os módulos é a chave para compreender o CMS HubSpot e tudo o que ele permite fazer. Módulos são componentes reutilizáveis que podem ser usados em modelos ou adicionados a páginas por meio de áreas de arrastar e soltar e colunas flexíveis. Além de usar os módulos fornecidos pela HubSpot, os desenvolvedores podem criar seus próprios módulos para tudo, desde testemunhos até galerias de fotos. Os módulos são criados usando as ferramentas de desenvolvimento local ou usando o Gerenciador de design.

Um módulo tem duas partes:

1. Uma interface do usuário criada por meio de uma lista de campos que os usuários verão ao editar uma instância de módulo.
2. Um fragmento de modelo HTML+HubL com CSS e JS associados para definir como o HTML será gerado

Para entender melhor o que é um módulo, vamos analisar o módulo simples "Membro da equipe". O módulo consiste em uma foto, o nome do membro da equipe, seu cargo e uma breve biografia, e quando faz parte de uma página web do CMS, é parecido com isso:

O desenvolvedor cria a interface do usuário (UI) para os módulos usando campos. O desenvolvedor então escolhe quais campos usar com base no tipo de módulo a ser criado, nos dados necessários e na experiência de edição. Neste caso, o módulo inclui:

1. um campo de imagem, para a foto do membro da equipe;
2. dois campos de texto, para o nome e o cargo do membro da equipe;
3. e um campo rich text, para uma breve biografia.

Quando um criador de conteúdo edita um módulo, a UI é criada com base nos campos que o desenvolvedor adicionou ao módulo e como cada campo foi configurado.

Há dois termos frequentemente utilizados em relação aos módulos. É importante entender a diferença entre eles.

• Módulo - blocos de construção reutilizáveis que podem ser adicionados a modelos e páginas.
• Instância de módulo - os módulos individuais renderizados na página. Eles podem ter valores de campo separados e, como resultado, parecer diferente das outras instâncias de módulo que se destinam ao mesmo módulo.

Os campos de um módulo são definidos em JSON como uma matriz de objetos. Cada campo tem um nome, tipo e valor padrão. Outras propriedades também estão disponíveis, dependendo do tipo de campo que controla a experiência de edição.

Para saber mais sobre todos os campos disponíveis, consulte Campos de tema e módulo.

Os valores de cada campo são disponibilizados pelo fragmento HTML+HubL para um módulo por meio de uma variável module. Os dados de cada campo podem ser acessados por meio das propriedades da variável module. Usando o módulo de membro da equipe como exemplo, o nome do membro da equipe pode ser acessado via {{ module.team_member_name }}.

Os módulos são adicionados aos modelos usando as tags module, module_block ou dnd_module e especificando o caminho para o módulo como um parâmetro. Os valores padrão dos campos em um módulo também podem ser substituídos no nível do modelo por meio da adição de parâmetros à tag que corresponde ao nome do campo, como mostrado na segunda parte do exemplo abaixo.

Os módulos são utilizados em um site, algumas vezes em várias páginas, até mesmo várias vezes em uma página. Devido a esta estrutura, o HTML, o CSS e o JS do seu módulo, considerando a acessibilidade, pode influenciar profundamente a capacidade de utilização do seu site para pessoas sem e com deficiência.

Em um sentido semelhante ao da acessibilidade, construir módulos para que todo o seu conteúdo seja baseado em campos, torna possível a localização posterior. Por exemplo, você pode ter um módulo "Artigos em destaque". Em vez de codificar o texto "Artigos em destaque", use um campo de texto ou um campo rich text. Em seguida, o texto pode ser alterado para outros idiomas. Para saber mais sobre localização no CMS, consulte vários idiomas.

Para começar, confira nosso tutorial Introdução aos módulos.

• Configurar um módulo
• Usar módulos em modelos
• Módulos padrão
• O editor de módulos