O HubSpot CMS Boilerplate

Last updated:

O HubSpot CMS Boilerplate serve como um ponto de partida para ajudar os desenvolvedores a colocar um site no ar rapidamente no HubSpot CMS e ilustra as práticas recomendadas na hora de criar com a plataforma do HubSpot CMS. O boilerplate é um projeto open-source do GitHub onde todos podem sugerir mudanças e adaptar 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 HubSpot CMS.

Watch
Fork
Star

Por que os desenvolvedores devem usar o HubSpot CMS Boilerplate?

O HubSpot CMS Boilerplate foi projetado e é mantido ativamente pela HubSpot. Ao criar o boilerplate, incorporamos as práticas recomendadas influenciadas pela forma como os desenvolvedores criam a melhor experiência de construção de sites, e então as aplicamos na construção de um site no HubSpot CMS. Isso fornece aos desenvolvedores um site limpo, com desempenho e pronto para ser modificado, o que poupa aos desenvolvedores uma quantidade significativa de tempo de desenvolvimento. O boilerplate também fornece CSS abrangente para os ativos relacionados ao HubSpot, tais como formulários, módulos de menu, classes de base e muito mais. Veja uma demonstração dinâmica do boilerplate em ação em https://boilerplate.hubspotcms.com/

Como começar a usar o HubSpot CMS Boilerplate

Para começar a usar a placa da caldeira no seu ambiente de desenvolvimento local, basta seguir o nosso Guia de introdução ao desenvolvimento de sites no HubSpot CMS.

Estrutura do HubSpot CMS Boilerplate

Os desenvolvedores podem trabalhar com o boilerplate usando as ferramentas de desenvolvimento local ou diretamente dentro do Gerenciador de design. 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.

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="{{ 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 partials globais de cabeçalho e rodapé. Isso nos permite manter o código dessas partials em seus próprios arquivos separados para modularidade e, por serem partials 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 site, todas 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

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..