> ## Documentation Index
> Fetch the complete documentation index at: https://br.developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# O HubSpot CMS Boilerplate
> O HubSpot CMS Boilerplate ilustra as práticas recomendadas e ajuda os desenvolvedores a criar rapidamente um site no HubSpot CMS.
[O Boilerplate do CMS da HubSpot](https://github.com/HubSpot/cms-theme-boilerplate) serve como ponto de partida para colocar um site em funcionamento no CMS da HubSpot, ao mesmo tempo em que ilustra algumas práticas recomendadas do CMS da HubSpot. O boilerplate é construído e ativamente mantido pela HubSpot, mas também é um projeto GitHub de código aberto onde todos são bem-vindos para sugerir mudanças e para seu próprio uso. Se você é novo no HubSpot CMS e quer começar um novo projeto baseado no boilerplate, siga o [guia de início rápido para desenvolver no CMS da HubSpot](/cms/start-building/introduction/classic-hubl-quickstart).
[Veja uma demonstração ao vivo do boilerplate](https://boilerplate.hubspotcms.com/).
Você pode trabalhar com o boilerplate usando as [ferramentas de desenvolvimento local](/developer-tooling/local-development/hubspot-cli/install-the-cli) ou diretamente dentro do [Gerenciador de design](https://knowledge.hubspot.com/cos-general/get-started-with-the-design-manager). O boilerplate usa referências de caminhos relativos para todos os ativos, o que facilita a adaptação a qualquer projeto. Isso também permite que o boilerplate seja totalmente transferível entre as contas na plataforma HubSpot. Abaixo está uma captura de tela da estrutura de pastas dos ativos do boilerplate. O boilerplate separa os ativos em múltiplos diretórios para fácil identificação de onde eles residem.
A estrutura de modelo subjacente do HubSpot CMS Boilerplate gira em torno de um [layout de base comum](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html), 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](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates). Saiba mais sobre [blocos e extensões](/cms/reference/hubl/overview#blocks-and-extends).
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 `` no seu site, como propriedades meta comuns (por exemplo: Título e Metadescrição), links Favicon, links CSS e scripts de terceiros.
```hubl theme={null}
{{ page_meta.html_title }}
{% if site_settings.favicon_src %}{% endif %}
{{ 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 }}
{{ standard_footer_includes }}
```
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](/cms/start-building/building-blocks/global-content).
Para obter mais detalhes sobre os ativos incluídos no boilerplate, [confira o wiki do boilerplate no GitHub](https://github.com/HubSpot/cms-theme-boilerplate/wiki).
## 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`](/cms/reference/hubl/functions#require-js) para carregar o jQuery onde e quando você precisar.
* Use uma CDN de confiança, e use [`require_js`](/cms/reference/hubl/functions#require-js) para carregar o jQuery onde e quando você precisar.
## Recursos relacionados
* [Introdução aos temas](/cms/start-building/building-blocks/themes/getting-started)
* [Como otimizar o seu site do CMS Hub para desempenho](/cms/best-practices/testing-staging-performance/speed)
* [Introdução à acessibilidade](/cms/best-practices/improve-existing-sites/accessibility)
A estrutura de modelo subjacente do HubSpot CMS Boilerplate gira em torno de um [layout de base comum](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html), 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](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates). Saiba mais sobre [blocos e extensões](/cms/reference/hubl/overview#blocks-and-extends).
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 `` no seu site, como propriedades meta comuns (por exemplo: Título e Metadescrição), links Favicon, links CSS e scripts de terceiros.
```hubl theme={null}