Configurar um módulo

Last updated:

Ao criar um módulo, há várias opções disponíveis que afetam onde um módulo está visível, como ele é identificado e como é editado. Os módulos aparecem localmente como pastas com um sufixo .module. Essa pasta contém os arquivos que compõem as configurações do módulo e o código usado para processá-lo. A configuração é mantida no arquivo meta.json. Os campos são configurados separadamente em um arquivo fields.json. A maioria da configuração também pode ser modificada usando o editor de módulo no Gerenciador de design. 

Estrutura de pastas do módulo exibida localmente

Adicionar um ícone

Os módulos podem ter um ícone usado no Gerenciador de design e nos editores de página e de e-mail. Para provedores do marketplace, esses ícones são obrigatórios. A intenção do ícone é que ele possa fornecer contexto visual para o criador de conteúdo no propósito do módulo. Portanto, é melhor ter ícones diferentes para os tipos de módulos em seu tema. Há duas maneiras de adicionar um ícone, através do gerenciador de design ou do CMS CLI.

Add an icon using the design manager

  1. Abra o módulo no gerenciador de design,
  2. quando no editor de módulo, o ícone exibido adjacente ao título e ao tipo de módulo é um botão. A seleção desse botão fornece um campo de carregamento de ícone.
  3. Carregue/selecione seu ícone e agora você poderá vê-lo no seu editor de páginas e gerenciador de design.
Change Icon

Adicionar um ícone usando a CLI

Para adicionar um ícone ao desenvolver localmente, abra o arquivo meta.json do módulo e adicione ou edite o valor do parâmetro do ícone para ser um SVG do gerenciador de arquivos.

// meta.json { "global": false, "host_template_types": ["PAGE"], "icon": "http://example.com/hubfs/code.svg", "label": "Code block", "smart_type": "NOT_SMART", "is_available_for_new_content": true, "inline_help_text": "This module is for code snippets." }

Criar um ícone do módulo

Os ícones do módulo devem ser um arquivo .svg e não maior em tamanho do que 10kb. Para obter melhores resultados, o ícone deve ser bastante simples e usar apenas uma cor. Se usar mais de uma cor, ele será convertido automaticamente para você. O ícone do módulo padrão exibido é um ícone de chave inglesa e pincel.

Alterar o rótulo

O rótulo usado quando os módulos são exibidos no editor pode ser ajustado separadamente do nome do módulo. Isso é útil ao desenvolver localmente, pois você pode ter um nome que faz sentido enquanto tem um criador de conteúdo diferente. Localmente, você altera o parâmetro label para definir o rótulo. No gerenciador de design há um campo no editor de módulo abaixo do nome do módulo.

Editor de módulo - campo de rótulo

Tornar um módulo global

Para módulos normais, o conteúdo de cada instância de um módulo em uma página, e-mail ou modelo é independente. Para alguns casos de uso, é útil poder fazer com que todas as instâncias de um módulo compartilhem o mesmo conteúdo. Definir global como true faz isso. 

Também é possível converter módulos em um modelo de arrastar e soltar para global por meio da interface de usuário.

Controlar onde um módulo está disponível para uso

Os módulos podem ser limitados a determinados tipos de conteúdo por meio de como hostTemplateTypes é configurado. Os módulos também podem ficar ocultos para que não possam ser adicionados diretamente às páginas por meio da configuração is_available_for_new_content para false. Os módulos criados para menus de navegação e pesquisa são bons candidatos a serem ocultados através de is_available_for_new_content.

Ambos também podem ser gerenciados através do editor de módulo.

Adicionar dependências de CSS e JavaScript

Além de usar module.css e module.js para adicionar CSS e JavaScript que serão adicionados a todas as páginas que incluem uma instância de módulo, as dependências que são compartilhadas entre os módulos podem ser anexadas usando css_assets e js_assets. Os caminhos podem ser absolutos ou relativos ao arquivo meta.json.

// meta.json { "css_assets": [{ "path": "../path/to/file.css" }], "js_assets": [{ "path": "../path/to/file.js" }] }

Aviso: ao usar caminhos relativos a dependências de referência, executar hs fetch --overwrite para atualizar o módulo para desenvolvimento local substituirá os caminhos relativos com caminhos absolutos.

meta.json

Você pode adicionar os parâmetros na tabela abaixo ao arquivo meta.json de um módulo.

ParameterTypeDescription Default
icon
String

URL para uma imagem a ser usada como o ícone de um módulo.

 null
label
String

Rótulo usado quando os módulos são exibidos nos editores de conteúdo
module_id
Number

ID exclusivo para o módulo que é independente do caminho.
is_available_for_new_content
Boolean

O valor para a alternância no canto superior direito do editor de módulos no HubSpot. Determina se o módulo pode ser usado no conteúdo.

 true
global
Boolean

Indica se o módulo é global ou não

 false
host_template_types
Array

Uma array de tipos de conteúdo nos quais o módulo pode ser usado. Um ou mais de [ "PAGE", "BLOG_post", "BLOG_LISTING", "EMAIL" ].

 ["PAGE", "BLOG_POST", "BLOG_LISTING"]
css_assets
Array

Uma array de arquivos CSS da qual o módulo depende. Dá suporte a caminhos relativos.

por exemplo, "css_assets": [{ "path": "../path/to/file.css" }]

 []
css_render_options
Object

Defina se o módulo CSS renderiza de forma assíncrona com async: true, false 

 {"async": false}
js_assets
Array

Uma array de arquivos JavaScript da qual o módulo depende. Dá suporte a caminhos relativos.

por exemplo, "js_assets": [{ "path": "../path/to/file.js" }]

 []
js_render_options
Object

Modifica a tag JavaScript do módulo adicionada à página renderizada. As opções incluem:

  • position: head , footer
  • async: true, false 
  • defer: true, false 
  • type: string

 

 {"position":"footer"}
inline_help_text
String

Texto de ajuda que será exibido na parte superior do módulo em uma caixa de informações azul (limite de 300 caracteres).

Melhor usado para fornecer informações necessárias para usar o módulo. Se você tiver informações de texto de ajuda específicas do campo para transmitir, consulte nossa documentação sobre texto de ajuda para campos.

 null
master_language
String

O código do idioma no qual os campos do módulo foram originalmente escritos.

por exemplo, pt-br
placeholder
Object

Define o conteúdo do espaço reservado para o módulo. Inclui as seguintes propriedades:

  • show_module_icon: se o ícone do módulo for exibido. true, false.
  • title: o título que aparece no módulo no editor. String.
  • description: a descrição que aparece no módulo no editor. String.
 False
Este artigo foi útil?
Este formulário deve ser usado apenas para fazer comentários sobre esses artigos. Saiba como obter ajuda para usar a HubSpot..