Introdução aos módulos

​

Antes de começar

• Configure um Ambiente de testes para desenvolvedores do HubSpot CMS. Você pode usar sua conta existente, mas o ambiente de testes permitirá o desenvolvimento sem afetar os ativos da sua conta principal.
• Instale o Node.js, que habilita as ferramentas de desenvolvimento local da HubSpot. As versões 10 ou superior são compatíveis.

1. Testimonial.module: a pasta que contém os arquivos que compõem o módulo personalizado que você criará como parte do tutorial.
2. homepage.html: o modelo que será editado para incluir o módulo personalizado.
3. images: a pasta que contém as imagens de perfil que você usará no módulo.

​

Configurar seu ambiente de desenvolvimento local

• No terminal, execute o comando a seguir para instalar a CLI globalmente. Para instalar a CLI apenas no seu diretório atual, execute o npm install @hubspot/cli.

npm install -g @hubspot/cli

• No diretório onde você armazenará os arquivos do tema, autentique a sua conta da HubSpot para que seja possível interagir com ela por meio da CLI.

hs account auth

• Pressione Enter para abrir a página da chave de acesso pessoal no navegador.
• Selecione a conta para a qual deseja implantar e clique em Continuar com esta conta. Você será redirecionado para a página da chave de acesso pessoal da conta.
• Ao lado de Chave de acesso pessoal, clique em Mostrar para revelar sua chave. Em seguida, clique em Copiar para copiá-la para a área de transferência.
• Cole a chave copiada no terminal e pressione Enter.
• Insira um nome exclusivo para a conta. Esse nome só será visto e usado por você ao executar comandos. Em seguida, pressione Enter. Para conectar as ferramentas de desenvolvimento local à sua conta:

​

Adicionar o CMS Boilerplate à sua conta

• Execute o comando abaixo para criar um novo tema chamado my-theme. Uma pasta de temas chamada my-theme será criada no seu diretório de trabalho contendo os ativos de boilerplate.

hs create website-theme my-theme

• Carregue os arquivos na sua conta.

hs upload <src> <destination>

​

Criar um módulo no HubSpot

• Faça login na sua conta da HubSpot e acesse o gerenciador de design, navegando até Marketing > Arquivos e modelos > Ferramentas de design.
• Na barra lateral esquerda do gerenciador de design, abra a pasta de temas que você acabou de fazer o upload.
• Na pasta de temas, abra a pasta de módulos.
• No canto superior esquerdo, clique em **Arquivo > Novo arquivo **para criar um novo módulo nesta pasta.
• Na caixa de diálogo, clique no menu suspenso, selecione Módulo e clique em Próximo.
• Marque a caixa de seleção Páginas para disponibilizar o módulo para o site e as landing pages.
• Nomeie o módulo como Depoimentos e clique em Criar.

​

Adicionar campos ao módulo

• Um campo de texto para armazenar o nome do cliente que está fornecendo o depoimento.
• Um campo de imagem que armazenará a imagem de perfil do cliente.
• Um campo de rich text que armazenará o depoimento do cliente.

​

Adicionar campo de texto para nome do cliente

• Na barra lateral direita do editor de módulos, clique no menu suspenso **Adicionar campo **e selecione Texto.
• Na barra lateral direita, clique no ícone de lápis no canto superior direito para dar um nome para o campo. Para este tutorial, insira o Nome do cliente. Você verá a mudança do nome da variável do HubL para customer_name.
• Defina o Texto padrão para Sally.

• Na barra lateral direita, clique no ícone de trilha de navegação para retornar ao menu do módulo principal.

​

Adicionar o campo de imagem para a foto de perfil do cliente

• Adicione outro campo usando o mesmo método, desta vez, selecionando o tipo de campo de Imagem.
• Rotule o campo de imagem Imagem do perfil, em seguida, defina o nome da variável do HubL como profile_pic.
• Em Imagem padrão, selecione a imagem do perfil fornecida para Sally na pasta de imagens dos arquivos do projeto concluídos.
• Defina o Texto alternativo como Imagem de perfil de Sally.

​

Adicionar o campo de rich text para o depoimento de Sally

• Adicione outro campo usando o mesmo método, desta vez selecionando o tipo de campo de Rich text.
• Rotule o campo de rich text Depoimentos.
• Clique na caixa de Rich text padrão e digite “Não tive nada além de experiências maravilhosas com esta empresa.”

Até agora, você adicionou dados em vários campos de módulo. Neste momento, porém, o módulo não contém nenhum HTML para renderizar esses dados. No editor do módulo, isso é refletido pelo estado vazio da seção module.html.

​

Adicionar o HubL para exibir os dados de campo

<!-- module.html -->
{{module.customer_name}}
<img src={{module.profile_pic.src}} alt="{{module.profile_pic.alt}}">
{{module.testimonial}}

• Com o HubL adicionado ao módulo, clique em Visualizar no canto superior direito para ver como o módulo está até agora.

• No canto superior direito, clique em Publicar alterações.

​

Exibir e modificar o módulo localmente

• No terminal, execute o seguinte comando: hs fetch <hs_src> <destination>:
  • <hs_src> representa o caminho do arquivo do módulo no HubSpot. Para obter o caminho do arquivo, clique com o botão direito do mouse no módulo, na barra lateral esquerda do gerenciador de design, e selecione Copiar caminho.
  • <destination> representa o caminho para o diretório local onde se encontra o tema. Se omitido, o comando será o padrão para o diretório de trabalho atual.

hs fetch my-theme/modules/testimonial.module

​

Abrir a pasta do módulo no seu ambiente local

​

Exibir o arquivo fields.json do módulo

//fields.json

[
  {
    "label": "Customer Name",
    "name": "customer_name",
    "id": "2a025cd5-7357-007f-ae2f-25ace762588e",
    "type": "text",
    "required": true,
    "locked": false,
    "validation_regex": "",
    "allow_new_line": false,
    "show_emoji_picker": false,
    "default": "Sally"
  },
  {
    "label": "Profile Picture",
    "name": "profile_pic",
    "id": "7877fb84-eb8a-d2c7-d939-77e6e9557d8f",
    "type": "image",
    "required": false,
    "locked": false,
    "responsive": true,
    "resizable": true,
    "default": {
      "src": "https://cdn2.hubspotqa.net/hubfs/101140939/profile-pic-sally.svg",
      "alt": "Sally Profile Picture",
      "width": 100,
      "height": 100,
      "max_width": 100,
      "max_height": 100
    }
  },
  {
    "label": "Testimonial",
    "name": "testimonial",
    "id": "c5524ece-1ab5-f92d-a5de-e2bf53199dfa",
    "type": "richtext",
    "required": false,
    "locked": false,
    "default": "<p>I’ve had nothing but wonderful experiences with this company.</p>"
  }
]

• name: o nome do campo.
• label: o rótulo do campo.
• default: o valor padrão do campo.

​

Exibir o arquivo module.html do módulo

<div class="testimonial">
  <h1 class="testimonial__header"> {{ module.customer_name }} </h1>
  <img class="testimonial__picture" src={{ module.profile_pic.src }} alt={{ module.profile_pic.alt }}>
  {{ module.testimonial }}
</div>

​

Exibir o arquivo module.css do módulo

.testimonial {
  text-align: center;
}

.testimonial__header {
  font-weight: bold;
}

.testimonial__picture {
  display: block;
  margin: auto;
}

​

As alterações locais para a sua conta da HubSpot

• Acesse o terminal e verifique se você está no diretório correto.
• Execute o comando watch para enviar alterações para o HubSpot ao salvar: hs watch <src> <destination>.

hs watch my-theme my-theme

​

Visualizar suas alterações locais no HubSpot

• Na sua conta da HubSpot, vá em Marketing > Arquivos e Modelos > Ferramentas de design.
• Na barra lateral esquerda, acesse o tema que você criou, abra a pasta de módulos e selecione o módulo Depoimentos.
• Com o módulo aberto, você deve ver suas alterações nos painéis module.html e module.css
• No canto superior direito, clique em Visualizar. Uma nova guia será aberta para exibir a visualização do módulo.

• criou um módulo no HubSpot.
• Baixou esse módulo para o seu ambiente local.
• Fez alterações no HubL + HTML e CSS usando suas ferramentas de desenvolvimento local.

​

Adicionar o módulo a um modelo

Para esta parte do tutorial, você trabalhará principalmente dentro das pastas modules e templates nos arquivos de tema locais.

• No editor de código, abra a pasta templates e, em seguida, abra o arquivo home.html.
• No arquivo home.html, acesse a dnd_section final, que começa na linha 28. Você adicionará o seu novo módulo a esta seção.
• Em dnd_section e acima dos outros dnd_modules, copie e cole a seguinte tag de módulo HubL:

{% dnd_module
 path= “../modules/Testimonial.module”,
 offset=0,
 width=4
%}
{% end_dnd_module %}

• O CMS da HubSpot usa um sistema de grade de 12 colunas; portanto, para espaçar este módulo de forma uniforme com os outros dois, você precisará atualizar a dnd_section de cada módulo para uma largura igual a 4.
• Em seguida, o primeiro dnd_module no grupo (testimonial) terá um deslocamento de 0 para posicioná-lo primeiro em lugar.
• O segundo dnd_module (linked_image) terá um deslocamento de 4 para posicioná-lo em segundo lugar.
• O terceiro dnd_module (rich_text) terá um deslocamento de 8 para posicioná-lo em terceiro lugar.

{% dnd_section
    background_color="#f8fafc",
    vertical_alignment="MIDDLE"
  %}

    {% dnd_module
      path= “../modules/Testimonial.module”,
      offset=0,
      width=4
    %}
    {% end_dnd_module %}

    {% dnd_module
      path="@hubspot/linked_image",
      img={
        "alt": "Stock placeholder image with grayscale geometrical mountain landscape",
        "loading": "lazy",
        "max_height": 451,
        "max_width": 605,
        "size_type": "auto_custom_max",
        "src": get_asset_url("../images/grayscale-mountain.png")
      },
      offset=4,
      width=4
    %}
    {% end_dnd_module %}
    {% dnd_module
      path="@hubspot/rich_text",
      html="<h2>Provide more details here.</h2><p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>"
      offset=8,
      width=4
    %}
    {% end_dnd_module %}
  {% end_dnd_section %}

​

Visualizar suas alterações no HubSpot

• Se você não tiver mantido o comando watch em execução para rastrear seu trabalho automaticamente, execute hs watch <src> <dest>. Certifique-se de que esse comando continue em execução ao concluir as próximas etapas.
• Na sua conta da HubSpot, abra o gerenciador de design (Marketing > Arquivos e modelos > Ferramentas de design.
• Na barra lateral esquerda do gerenciador de design, selecione o arquivo home.html.
• No canto superior direito, clique em Visualizar e selecione Visualização em tempo real com opções de exibição para abrir a visualização do modelo em uma nova janela.

• Na nova guia, confira a visualização do modelo, que deve conter o módulo de depoimentos recém-adicionado.

​

Personalizar o módulo no modelo localmente

• Retorne ao editor de códigos e abra o arquivo home.html.
• Adicione os seguintes parâmetros à tag do módulo de depoimentos:

{% dnd_module
 path='../modules/Testimonial.module',
 customer_name = "Mary",
 profile_pic = {
  src: "{{
   get_asset_url('../images/profile-pic-mary.svg') }}",
   alt: "Mary Profile Picture"
   },
 testimonial = "Wow, what a product! I can't wait to recommend this to all my family and friends!",
 offset=0,
 width=4
%}
{% end_dnd_module %}

• customer_name: este parâmetro passa o nome Mary para o campo de nome do cliente, substituindo o valor de Sally.
• profile_pic**: **este parâmetro é um objeto que contém duas propriedades.
  • A propriedade src usa a função do HubL get_asset_url para recuperar o URL da nova imagem de perfil. Observe que o caminho do arquivo de imagem é relativo ao seu diretório de trabalho. Primeiro, você precisará adicionar essa imagem à pasta images nos arquivos do tema local. Você pode encontrar a imagem na pasta images nosarquivos do projeto concluído.
  • A propriedade alt atribui o texto alternativo da imagem.
• testimonial: este parâmetro passa um novo texto para o campo de depoimentos.

{% dnd_module
 path='../modules/Testimonial.module',
 customer_name = "Mary",
 profile_pic = {
  src: "{{
   get_asset_url('../images/profile-pic-mary.svg') }}",
   alt: "Mary Profile Picture"
   },
 offset=0,
 width=4
%}
 {% module_attribute "testimonial" %}
   Wow, what a product! I can't wait to recommend this to all my family and friends!
 {% end_module_attribute %}
{% end_dnd_module %}

​

Adicionar mais dois módulos de depoimentos ao modelo

• Acesse o editor de códigos e, em seguida, abra o arquivo home.html.
• No módulo de depoimentos que você adicionou anteriormente, adicione outra instância do módulo, copiando e colando o código desse módulo. No novo módulo de depoimentos, especifique os seguintes detalhes usando as mesmas etapas acima:
  • O nome do cliente é Ollie.
  • O depoimento de Ollie diz: I can't believe that I ever conducted business without the use of this product!
  • Para a imagem de Ollie, adicione o caminho de arquivo relativo para o arquivo dentro da pasta images. Você pode obter a imagem nos arquivos do projeto concluído. Em seguida, dê à imagem de Ollie o atributo alt de Ollie Profile Picture.
  • Para manter o espaçamento, defina offset como 4 e width como 4.
• Abaixo do segundo módulo de depoimento, adicione um terceiro com os seguintes detalhes:
  • O nome do cliente é Erin.
  • O depoimento de Erin diz: My business has nearly tripled since I began to use this product! Don't wait, start now!
  • Para a imagem de Erin, adicione o caminho de arquivo relativo para o arquivo dentro da pasta images. Em seguida, dê à imagem de Erin o atributo alt de Erin Profile Picture.
  • Para manter o espaçamento, defina offset como 8 e width como 4.
• Salve suas alterações.

​

Modificar o nome do tema

// example theme.json

{
  "name": "my_first_theme",
  "label": "My first theme"
}

​

Próximas etapas

• Configurando um módulo
• Usar módulos em modelos
• Módulos padrão

​

Outros tutoriais

• Introdução aos temas
• Introdução às funções sem servidor
• Criar um fluxo de trabalho de desenvolvedor eficaz
• Introdução à acessibilidade
• Como usar estruturas JavaScript no CMS Hub
• Como usar componentes da Web em módulos personalizados
• Como criar um módulo baseado em componentes da Web com bloco de código