Plantillas 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 funcionalidad de arrastrar y soltar, lo que solo es posible con las plantillas HTML + HubL.

image1-2
La plantilla anterior es la plantilla base.html incluida en el boilerplate de HubSpot CMS, que es una excelente manera de comenzar a desarrollar con HubSpot.

Familiaridad y herramientas

Dado que las plantillas HTML + HubL son archivos codificados, puedes usar tus herramientas preferidas para editarlas localmente. Recomendamos usar las herramientas de desarrollo local de HubSpot para que puedas cargar, recuperar, ver, crear y administrar de forma segura archivos en el sistema de archivos del desarrollador, así como en el administrador de archivos.

Crear plantillas HTML + HubL con HubSpot es similar a usar otro lenguaje de plantillas que hayas usado antes. 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 desea cargar un archivo CSS en una página para ciertos módulos, en lugar de usarlo<link rel="stylesheet" type="text/css" href="theme.css">, debe incluir la hoja de estilo a través de css_assets en el archivo meta.json del módulo. Esto permite a HubSpot cargar condicionalmente el CSS solo cuando el módulo está presente en una página, minimizando la cantidad de CSS innecesario cargado.

Más información sobre cómo optimizar el workflow de desarrollo de HubSpot.

Anotaciones de la plantilla

Las anotaciones de la plantilla, incluidas en la parte superior de una plantilla, configuran ajustes importantes de la plantilla, como el tipo de plantilla y si se puede usar para crear contenido nuevo. Las anotaciones de la plantilla se pueden cambiar en cualquier momento durante el proceso de desarrollo. A continuación, descubre más información sobre las anotaciones de plantilla disponibles.

<!--   templateType: page   isAvailableForNewContent: false   enableDomainStylesheets: false   label: Homepage screenshotPath: ../images/template-previews/home.png --> <!doctype html> <html> ...
Anotaciones de la plantilla
AnotaciónTipoDescripción
templateType
StringEspecifica qué tipo de plantilla es un archivo. Los valores incluyen:
isAvailableForNewContent
String

Especifica si una plantilla está disponible para su selección en el proceso de creación de contenido. Los valores incluyen: true, false.

Las plantillas establecidas en false no necesitan incluir las variables requeridas. Las plantillas del tipo page que se establecen en false también se pueden usar como parciales estándar.

enableDomainStylesheets
String

Especifica si la plantilla debe cargar hojas de estilo de dominio. Los valores incluyen: true, false.

Label
String

Descripción sencilla de la plantilla, que se muestra en la pantalla de selección de plantillas. Por ejemplo, About Page, Homepage, Pricing.

screenshotPath
String

La captura de pantalla que se muestra cuando un creador de contenido está seleccionando 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. Los parciales te permiten adoptar un enfoque más modular al compartir el marcador entre múltiples plantillas. Por ejemplo, un encabezado se puede convertir en parcial para que pueda incluirlo fácilmente como componente sin necesidad de volver a codificarlo.

Parciales estándar

Un parcial estándar es una plantilla o componente reutilizable con contenido que se puede editar en páginas individuales. Esto permite a los creadores de contenido cambiar el contenido según sea necesario, a diferencia de los parciales globales que siempre comparten contenido. Por ejemplo, el siguiente código arrastraría el módulo de la barra lateral a otro archivo de plantilla.

Los parciales estándar deben incluir las siguientes anotaciones en la parte superior del archivo de plantilla:

  • templateType: page
  • isAvailableForNewContent: false
{% include "../partial/sidebar.html" %}

Parciales globales

Un parcial global es un tipo de contenido global que se puede usar en múltiples plantillas con contenido que se comparte en todas las instancias del parcial. Los parciales globales a menudo se usan para encabezados y pies de página, que puedes ver un ejemplo en el encabezado y pie de página de HubSpot CMS Boilerplate. Estos parciales se llaman entonces en base.html utilizando la etiqueta global_partial.

Los parciales globales deben incluir la anotación templateType: global_partial en la parte superior del archivo.

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

Bloques y extensiones

Al crear plantillas complejas, puedes crear bloques compartimentados que amplíen una plantilla principal.

Por ejemplo, puedes crear una plantilla principal 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 body es un nombre único:

{% block body %} <!-- Content to display --> {% endblock body %}

En la plantilla secundaria, puedes extender la plantilla principal e insertar más contenido en el bloque 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 la plantilla base.html de HubSpot CMS boilerplate, que luego se extiende por las otras plantillas en la carpeta de plantillas.

Grupos globales

También se pueden incluir losgrupos globales creados con el creador 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.