Plantillas de HTML + HubL

Last updated:

Las plantillas HTML + HubL se pueden utilizar para cualquier tipo de plantilla en el CMS de HubSpot. Estas plantillas son archivos .html que admiten el lenguaje de plantillas HubL. Como estas plantillas codificadas son compatibles con HubL, la mejor experiencia de previsualización es utilizar la vista preliminar de la plantilla en el Administrador de diseño o ver las páginas en una cuenta de entorno de pruebas. Las plantillas HTML + HubL pueden contener Parciales, que se pueden utilizar para separar trozos de código de uso común, como un encabezado o un pie de página.

Las plantillas HTML + HubL dan un mayor control a los desarrolladores que las plantillas de arrastrar y soltar del administrador de diseño visual. Los desarrolladores, a su vez, pueden ofrecer mejores experiencias a los creadores de contenido mediante la función de arrastrar y soltar, lo que sólo es posible con las plantillas HTML + HubL.

image1-2

El ejemplo de la captura de pantalla proviene del archivo base.html de nuestro cms-theme-boilerplate. La plantilla está diseñada para ser un punto de partida para los desarrolladores que construyen un gran sitio web en el software de CMS de HubSpot. La plantilla representa las mejores prácticas de HubSpot, y tenemos la intención de aprender de tus comentarios y proyectos similares. Esperamos que te sirva de inspiración y te ayude a acelerar tus proyectos de sitio web.

Familiaridad y herramientas

Dado que las plantillas HTML + HubL son archivos codificados, se pueden utilizar las herramientas existentes que los desarrolladores ya tienen para editarlas localmente. La mejor experiencia de desarrollo local es utilizar nuestras herramientas de desarrollo local. Con ellos, puedes cargar, recuperar, ver, crear y administrar de forma segura archivos en el sistema de archivos del desarrollador, así como en el administrador de archivos.

Para los desarrolladores familiarizados con otros lenguajes de plantillas, ya que estas plantillas giran en torno a HTML y una pizca de HubL cuando es necesario, es fácil ver las similitudes con otros lenguajes de plantillas que puede haber utilizado antes. Esto facilita la transición desde otras plataformas. La diferencia principal es que HubSpot adopta una postura de opinión sobre las mejores formas de hacer algunas cosas para ofrecer la mejor experiencia a los creadores de contenido, y también quita gran parte del trabajo de mantenimiento y optimización del rendimiento al desarrollador. 

Por ejemplo: Si quieres cargar archivos CSS, en lugar de utilizar <link rel="stylesheet" type="text/css" href="theme.css"> para las hojas de estilo, te animamos a que utilices requires a nivel de plantilla, manteniendo el CSS específico del módulo, así como los archivos meta.json de los módulos para especificar las hojas de estilo que pueden compartirse entre módulos.

La ventaja de este enfoque es que transfieres el trabajo de cargar condicionalmente ese CSS de ti y de tus herramientas de desarrollo a HubSpot. El CMS de HubSpot sabe si un creador de contenido agrega una instancia de un módulo a una página y como tal puede cargar condicionalmente el CSS requerido. Minimizar el CSS cargado a solo lo necesario, asegurando una experiencia de carga más rápida. El CMS de HubSpot también toma este CSS y hace la mejora del rendimiento manejando la minificación y la combinación de los archivos según sea necesario, así como sirviéndolos a través de CDN automáticamente sin ningún esfuerzo por tu parte.

Para facilitar el desarrollo en HubSpot hay  herramientas tanto de la comunidad como de HubSpot que vale la pena conocer. Dado que HubL está basado en Jinja y sigue en su mayor parte la misma sintaxis, normalmente puedes utilizar un plugin de lenguaje en tu editor local para jinjava para mejorar el resaltado de sintaxis de los archivos HTML + HubL.

Anotaciones de la plantilla

Las anotaciones de la plantilla proporcionan una forma de desarrollo local fácil de indicar a HubSpot las configuraciones importantes de las plantillas.  Debido a que la anotación es parte del código, puedes cambiar la anotación en un momento posterior para cambiar el templateType.

<!--   templateType: page   isAvailableForNewContent: false   enableDomainStylesheets: false   label: Homepage screenshotPath: ../images/template-previews/home.png --> <!doctype html> <html> ...

Estas configuraciones de la plantilla determinan cómo y si las plantillas aparecen para los creadores de contenido y si utilizan hojas de estilo a nivel de dominio.

Anotaciones de la plantilla
AnotaciónDescripciónValores posibles
templateType
Specifies which template type a file is.
isAvailableForNewContent
Specifies if a template is available for selection in the content creation process.

true, false

enableDomainStylesheets
Specifies if the template should load stylesheets defined under settings > website > pages

true, false

Label
User friendly description of the template, displayed in the template selection screen

Página Acerca de, página de inicio, precios, cualquier cadena personalizada

screenshotPath
String

Denota una captura de pantalla que se utiliza cuando un creador de contenido está eligiendo una plantilla. Esta captura de pantalla debería facilitar la diferenciación de tus plantillas.

Incluye encabezado y pie de página

Las plantillas de HubSpot requieren la presencia de dos etiquetas a menos que el archivo sea una plantilla parcial. Estas son las etiquetas básicas:

  • {{ standard_header_includes }} - Se utiliza para agregar de forma inteligente el CSS requerido combinado y minimizado. 
  • {{ standard_footer_includes }} - Se utiliza para agregar de forma inteligente javascript en la parte inferior de una página de forma dinámica, para cosas como el script de seguimiento de HubSpot y los módulos.

Estas etiquetas deben estar presentes en una plantilla o en sus hijos parciales para poder publicarse y utilizarse.

Parciales

Las plantillas parciales son archivos HTML + HubL que pueden incluirse en otros archivos codificados. Esto permite a los desarrolladores adoptar un enfoque más modular para construir documentos complejos y compartir el marcado entre varias plantillas. Ejemplos comunes de esto serían los encabezados, pies de página, barras laterales, etc., y a menudo son las mismas, por lo que el uso de parciales para administrar ese contenido es una experiencia fácil. Para crear un archivo HTML que no requiera las variables estándar de la plantilla, debes incluir la anotación isAvailableForNewContent: false en la parte superior del archivo.

Parcial estándar

Un tipo parcial de plantilla que se puede usar en múltiples plantillas con contenido que pueden editarse en páginas individuales. templateType: page y isAvailableForNewContent: false

{% include "../partial/sidebar.html" %}

También puedes compilar varios archivos CSS en un único archivo CSS utilizando la etiqueta include. Cuando se publica el archivo padre, el archivo incluido se compila en 1 archivo con el CSS del padre y del hijo, y se minifica. Esta técnica se utiliza en el CSS de cms-theme-boilerplate en la parte inferior del archivo para combinar varios archivos CSS en 1 archivo.

Parcial global

Un tipo parcial de plantilla que puede utilizarse en varias plantillas con contenido que se edita globalmente. Los parciales globales se utilizan con parciales que utilizan el annotation templateType: global_partial y se suelen utilizar para los encabezados y pies de página. Esta técnica se utiliza en el cms-theme-boilerplate para los parciales de encabezado y pie de página. Estos parciales se llaman entonces en base.html utilizando la etiqueta global_parcial. Los parciales globales son una forma de contenido global.

{% global_partial path="../partials/header.html" %}

Bloqueos y extensiones

Al crear plantillas complejas, puedes crear bloques compartimentados que amplíen una plantilla principal. Esta técnica no es para todo el mundo, pero puede ser útil para mantenerse organizado cuando se codifican plantillas complejas.

Un caso de uso, puedes crear una plantilla padre que incluya las variables requeridas standard_header_includes y standard_footer_includes. Dentro de esa plantilla, se define un bloque único utilizando la siguiente sintaxis donde el cuerpo es un nombre único:

{% block body %} <!-- Default content if template isAvailableForNewContent and chosen as a page template --> {% endblock body %}
{% extends "./layouts/base.html" %} {% block body %} <h3>Page Content</h3> <ul> <li>Bullet 1<li> <li>Bullet 2<li> <li>Bullet 3<li> </ul> {% endblock %}

Este método se utiliza en el cms-theme-boilerplate, en base.html. Que se amplía con las plantillas de la carpeta de plantillas.

Grupos globales

También se pueden incluir losGrupos Globales creados con el constructor de plantillas de arrastrar y soltar en el administrador de diseño. La sintaxis se muestra a continuación:

{% include "/path/to/global_header.template.json" %}

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