Plantilla de CMS de HubSpot

Last updated:

La plantilla de CMS de HubSpot sirve como punto de partida para ayudar a los desarrolladores a poner en marcha un sitio web de inmediato en CMS de HubSpot y muestra buenas prácticas que los desarrolladores pueden usar a la hora de crear en la plataforma de CMS de HubSpot. La plantilla es un proyecto de GitHub de código abierto donde todos pueden hacer sus aportes y adaptarla para su propio uso. Si eres nuevo en el CMS de HubSpot, y quieres empezar un nuevo proyecto basado en la plantilla, sigue la guía de inicio rápido para desarrollar en el CMS de HubSpot.

¿Por qué los desarrolladores deberían utilizar la plantilla de CMS de HubSpot?

La plantilla de CMS de HubSpot está construida y mantenida activamente por HubSpot. Al construir la plantilla, incorporamos las mejores prácticas que fueron influenciadas por cómo los desarrolladores crearon la mejor experiencia de construcción de sitios web y luego aplicamos las mismas a la construcción de un sitio web en el CMS de HubSpot. Esto proporciona a los desarrolladores un sitio web limpio, rendimiento y listo para ser modificado, lo que ahorra a los desarrolladores una cantidad significativa de tiempo de desarrollo. La plantilla también proporciona un CSS integral para los materiales relacionados con HubSpot, como formularios, módulos de menú, clases base y más. Puedes ver una demostración en directo de la plantilla en https://boilerplate.hubspotcms.com/

Cómo empezar a utilizar la plantilla de CMS de HubSpot

Para empezar a utilizar la plantilla en tu entorno de desarrollo local, sólo tienes que seguir nuestra Guía de cómo empezar a desarrollar sitios web en el CMS de HubSpot.

Estructura de la plantilla de CMS de HubSpot

Los desarrolladores pueden trabajar con la plantilla utilizando herramientas de desarrollo locales o directamente dentro del Administrador de diseño. La plantilla utiliza referencias de rutas relativas para todos los materiales, lo que facilita su adaptación a cualquier proyecto. Esto también permite que la plantilla sea completamente portable entre cuentas en la Plataforma HubSpot. A continuación se muestra una captura de pantalla de la estructura de carpetas de los activos de la plantilla. La plantilla almacena sus materiales en varios directorios para una fácil identificación de dónde residen.

Estructura de las carpetas de la plantilla de CMS de HubSpot

La estructura subyacente de las plantillas de CMS de HubSpot gira en torno a un diseño base común, ubicado en la carpeta de plantillas > diseños, que luego se extiende al crear plantillas de páginas adicionales dentro del sistema utilizando la etiqueta {% extends %} y haciendo 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.

Este es un método común de desarrollo en los sistemas CMS donde tienes una plantilla base (a veces llamada principal/padre) que contiene todas las principales piezas estructurales comunes de contenido en tu sitio. Estos suelen ser elementos que se encuentran dentro del elemento <head> en tu sitio, como las meta propiedades comunes (ejemplo: Title y Meta Description), enlaces Favicon, enlaces 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="{{ 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, pueden ser fácilmente editados usando nuestro Editor de contenido Global por sus creadores de contenido.

 

Para profundizar en los activos incluidos en la plantilla , consulta la wiki de la plantilla en GitHub.

jQuery

La plantilla de tema de HubSpot Theme 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.

Históricamente 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 utilizan jQuery. Porque JQuery no es requerido, y hay mejores formas para que los desarrolladores incluyan bibliotecas que también funcionan con el control de fuente. Se aconseja desactivar la configuración de jQuery para los nuevos sitios web. 

Ten en cuenta si deshabilitas jQuery en un dominio que tiene un sitio web existente - cualquier página de destino o páginas web existentes que tengas podrían romperse si dependen de jQuery.

Si deseas utilizar jQuery en tu nuevo sitio web, te recomendamos que utilices la última versión de jQuery. Hay dos maneras fáciles de hacerlo:

  • Carga 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 tu confianza y usa require_js para cargar jQuery donde y cuando lo necesites.

Recursos relacionados


¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.