Última modificação: 28 de agosto de 2025

​
Estrutura do HubSpot CMS Boilerplate

Estrutura de pastas do HubSpot CMS Boilerplate
A estrutura de modelo subjacente do HubSpot CMS Boilerplate gira em torno de um layout de base comum, localizado na pasta modelos > layouts, que é então a tag {% extends %}, e faz referência ao bloco {% block body %} para seu conteúdo principal. Um exemplo de como a tag extend e os blocos são usados pode ser visto em qualquer um dos arquivos html dentro do diretório de modelos. Saiba mais sobre blocos e extensões. Este é um método comum de desenvolvimento em sistemas CMS em que você tem uma base (às vezes chamada de modelo principal) que contém todas as principais peças estruturais comuns de conteúdo do site. Estes costumam ser os itens que estão dentro do elemento <head> no seu site, como propriedades meta comuns (por exemplo: Título e Metadescrição), links Favicon, links CSS e scripts de terceiros. 
<!doctype html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
 <head>
   <meta charset="utf-8">
   <title>{{ page_meta.html_title }}</title>
   {% if site_settings.favicon_src %}<link rel="shortcut icon" href="https://br.developers.hubspot.com/docs{{ site_settings.favicon_src }}" />{% endif %}
   <meta name="description" content="{{ page_meta.meta_description }}">
   {{ require_css(get_asset_url("../../css/layout.css")) }}
   {{ require_css(get_asset_url("../../css/main.css")) }}
   {{ require_css("https://fonts.googleapis.com/css?family=Merriweather:400,700|Lato:400,700&display=swap") }}
   {{ require_js(get_asset_url("../../js/main.js")) }}
   {{ standard_header_includes }}
 </head>
 <body>
   <div class="body-wrapper {{ builtin_body_classes }}">
     {% block header %}
       {% global_partial path="../partials/header.html" %}
     {% endblock header %}

     {% block body %}
       <!-- Nothing to see here -->
     {% endblock body %}

     {% global_partial path="../partials/footer.html" %}
   </div>
   {{ standard_footer_includes }}
 </body>
</html>
Dentro desse layout de base, há também chamadas para as nossas parciais globais de cabeçalho e rodapé. Isso nos permite manter o código dessas parciais em seus próprios arquivos separados para modularidade e, por serem parciais globais, elas podem então ser facilmente editadas pelos criadores de conteúdo usando nosso Editor de conteúdo global. Para obter mais detalhes sobre os ativos incluídos no boilerplate, confira o wiki do boilerplate no GitHub.

​
jQuery

O boilerplate de temas da HubSpot não exige jQuery para funcionar. Para contas da HubSpot mais antigas, o jQuery é carregado por padrão. As novas contas da HubSpot têm o jQuery desativado por padrão. Tradicionalmente, os scripts da HubSpot exigiam jQuery para funcionar, por isso a configuração de todo o domínio estava lá para ajudar a garantir a compatibilidade. Os scripts da HubSpot não usam mais jQuery. Porque ele não é necessário e há maneiras melhores de os desenvolvedores incluírem bibliotecas que também trabalham com controle de código fonte. É aconselhável desativar as configurações jQuery para sites novos. Esteja ciente de que, se você desativar o jQuery em um domínio que já tenha um sitetodas as landing pages ou páginas da web existentes poderão ser afetadas se dependerem de jQuery. Se você deseja usar jQuery no seu site novo, é recomendado usar a versão mais recente do jQuery. Há duas maneiras simples de fazer isso:
  • Faça o upload da última versão do jQuery no seu sistema de arquivos de desenvolvimento e use require_js para carregar o jQuery onde e quando você precisar.
  • Use uma CDN de confiança, e use require_js para carregar o jQuery onde e quando você precisar.

​
Recursos relacionados