Conteúdo global

Last updated:

O conteúdo global é o conteúdo que é compartilhado em diferentes partes de um site. Exemplos comuns são cabeçalhos de sites, rodapés, barras laterais, logotipos ou outros componentes. Os desenvolvedores estabelecem quais componentes devem ser globais, usando partials globais ou tornando os módulos globais. Ao editar um componente global, é fornecida uma experiência de edição diferente para os editores de conteúdo, o que facilita a edição do conteúdo global e a visualização das alterações nas páginas antes da publicação. Para saber mais sobre como editar o conteúdo global, consulte nosso artigo da central de conhecimento sobre como usar o conteúdo global em vários modelos.

Editor de conteúdo global

Quando e onde devo usar o conteúdo global

O conteúdo global deve ser usado nas áreas de um site em que você precisa exibir informações consistentes em várias páginas. Um grande exemplo disso é o cabeçalho e o rodapé do site. Outro exemplo de conteúdo global pode ser encontrado no topo desta página. O cabeçalho do site para desenvolvedores utiliza conteúdo global para criar o cabeçalho superior que está ilustrado abaixo.

Cabeçalho global do site da HubSpot para desenvolvedores

Abaixo estão alguns exemplos adicionais de áreas em que você pode usar conteúdo global:

  • Navegação secundária para diferentes seções do site
  • Rodapés com direitos autorais (ou sub-rodapés)
  • Barras laterais em posts de blog (para mostrar posts recentes, listagens de autores etc.)

Como o conteúdo global é usado em vários lugares em um site, é fundamental projetar e criar os partials e módulos globais de forma a promover a acessibilidade.

Partials globais vs. Módulos globais

Partials globais são partes do conteúdo HTML e HubL que podem ser reutilizadas em todo o site. Os tipos mais comuns de partials são cabeçalhos de sites, barras laterais e rodapés. 

Os Módulos globais são módulos compostos por um ou vários conteúdos que podem ser utilizados em várias páginas do site. Alguns tipos comuns de módulos globais podem ser itens como formulários de assinatura de blogs, elementos secundários de navegação e calls to action.

Todos os módulos e campos dos partials globais e módulos globais podem ser editados com facilidade no editor de conteúdo global.

Criar um modelo de partial global de conteúdo utilizando ferramentas de desenvolvimento local

Você pode criar um novo Modelo de partial global usando o comando de criação e usando global-partial como tipo de modelo, conforme ilustrado abaixo.

hs create template <partial-file-name>

Você será solicitado a escolher um tipo de modelo. Escolha "partial global".

Isso criará o seu modelo no diretório desejado com as anotações a seguir incluídas no arquivo HTML.

<!-- templateType: global_partial label: Page Header -->

Para ver uma amostra de um partial global de conteúdo, consulte a nossa boilerplate no GitHub.

Adicionar áreas de arrastar e soltar aos Partials globais de conteúdo

Você pode habilitar os recursos de arrastar e soltar conteúdo dentro de seus partials globais adicionando tags dnd_area, tal como faria nos modelos de página. Consulte a nossa documentação sobre a área de arrastar e soltar para obter mais informações. 

Incluir uma partial de conteúdo global em um modelo existente

Para adicionar sua partial global a um de seus modelos existentes, use a tag global_partial do HubL, fazendo referência ao caminho para sua partial. Abaixo está um exemplo de uso dessa tag em nossa boilerplate.

{% global_partial path="../partials/header.html" %}

Quando partials globais são produzidas, elas são envolvidas por <div>. Isso é usado pelo editor de páginas para identificar que o conteúdo é uma partial global.

<div data-global-resource-path="cms-theme-boilerplate/templates/partials/header.html"> <!-- Your header.html code is output here --> </div>

Não utilize global_partial dentro do <head> de um modelo. Fazer isso gera código HTML inválido e pode causar efeitos colaterais.

Para a maioria das situações em que você gostaria de usar uma partial global no cabeçalho, pode fazer mais sentido usar um módulo globalcom {%require_head%} para inserir código personalizado no cabeçalho e ainda fornecer campos de módulo.

Criar um módulo global

Os módulos globais podem ser criados como qualquer outro módulo utilizando as ferramentas da CLI. A principal diferença entre um módulo global e um módulo padrão é o sinalizador global no arquivo meta.json dos módulos (veja a linha 5 nas amostras de código abaixo).

Módulo global

// meta.json file { "css_assets": [], "external_js": [], "global": true, "help_text": "", "host_template_types": ["PAGE"], "js_assets": [], "other_assets": [], "smart_type": "NOT_SMART", "tags": [], "is_available_for_new_content": false }

Módulo não global

// meta.json file { "css_assets": [], "external_js": [], "global": false, "help_text": "", "host_template_types": ["PAGE"], "js_assets": [], "other_assets": [], "smart_type": "NOT_SMART", "tags": [], "is_available_for_new_content": false }

Criar um módulo usando o comando hs create module <name> <dest>e definir este sinalizador para true no arquivo meta.json informará ao sistema de que se trata de um Módulo global. Para começar a usar os módulos, acesse nossa página de Visão geral dos módulos. Você também pode criar módulos globais através do Gerenciador de design. Para saber mais sobre a criação de módulos (tanto globais quanto personalizados), consulte o nosso artigo de central de conhecimentos sobre criar e editar módulos.


Esse artigo foi útil?
Este formulário é para comentários sobre nossos documentos de desenvolvimento. Se tiver comentários sobre o produto da HubSpot, em vez disso compartilhe sua opinião no Fórum de Ideias.