Última modificación: 28 de agosto de 2025

​
Estructura de la biblioteca de recursos del CMS de HubSpot

Estructura de las carpetas de la biblioteca de recursos del CMS de HubSpot
La estructura subyacente de la biblioteca de recursos del CMS de HubSpot gira en torno a un diseño de base común ubicado en la carpeta plantillas > diseños, que luego es la etiqueta {% extends %} y hace referencia al bloque {% block body %} para su contenido principal. Se puede ver una muestra de cómo se utilizan la etiqueta extendida y los bloques en cualquiera de los archivos html dentro del directorio de plantillas. Más información sobre los bloques y las extensiones. Este es un método común de desarrollo en sistemas CMS, donde se utiliza una plantilla base (a veces llamada principal) que contiene los elementos estructurales comunes del contenido de tu sitio. Estos suelen ser elementos que se encuentran dentro del elemento <head> de tu sitio, como las meta propiedades comunes (por ejemplo: título y metadescripción), enlaces de favicono, enlaces de CSS y scripts de terceros 
<!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://developers.hubspot.es/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 de este diseño base, también hay llamadas a nuestros parciales globales de encabezados y pie de página. Esto nos permite mantener el código de estas parciales en sus propios archivos separados para la modularidad y, debido a que son parciales globales, se pueden editar fácilmente usando nuestro Editor de contenido global. Para profundizar en los recursos incluidos en la biblioteca , consulta la wiki de la biblioteca en GitHub.

​
jQuery

La biblioteca de temas de HubSpot no requiere jQuery para funcionar. Para las cuentas más antiguas de HubSpot, jQuery se carga por opción predeterminada. Las nuevas cuentas de HubSpot, tienen jQuery desactivado por opción predeterminada. Anteriormente, los scripts de HubSpot requerían jQuery para funcionar correctamente, por lo que la configuración de todo el dominio estaba ahí para ayudar a garantizar la compatibilidad. Los scripts de HubSpot ya no usan jQuery. Porque JQuery no es necesario y hay mejores formas para que los desarrolladores incluyan bibliotecas que también funcionan con el control de origen. Se aconseja desactivar la configuración de jQuery en los nuevos sitios web. Ten en cuenta que si deshabilitas jQuery en un dominio que tiene un sitio web existente, las landing pages o páginas web que tengas podrían romperse si dependen de jQuery. Si quieres utilizar jQuery en tu nuevo sitio web, te recomendamos que utilices la última versión de jQuery. Hay dos maneras de hacerlo:
  • Sube la última versión de jQuery en tu sistema de archivos para desarrolladores y utiliza require_js para cargarlo donde y cuando lo necesites.
  • Utiliza una CDN de confianza y usa require_js para cargar jQuery donde y cuando lo necesites.

​
Recursos relacionados