Visión general de la sintaxis de HubL
El CMS de HubSpot utiliza el HubSpot Markup Language, denominado HubL (pronunciado "Hubble"). HubL es la extensión de Jinjava de HubSpot, un motor de plantillas basado en Jinja. HubL utiliza una buena cantidad de marcas que son únicas de HubSpot y no son compatibles con todas las características de Jinja.
Este artículo te llevará a través de los fundamentos de las características y la sintaxis de HubL.
Al igual que otros lenguajes de plantillas de uso común, como PHP, HubL se puede mezclar con tu HTML en archivos de plantillas codificadas o módulos de plantillas de HubL. Para diferenciar dónde empieza y termina tu HubL, necesitaras aprender algunos símbolos clave que actúan como delimitadores.
Las sentencias HubL se utilizan para crear módulos editables, definir la lógica condicional de las plantillas, establecer bucles for, definir variables, etc. Las sentencias están delimitadas por {%. No imprimen nada en la página.
Las expresiones imprimen valores almacenados en el contexto de la plantilla. Las expresiones están delimitadas por {{. Por ejemplo, una variable debe ser definida como una sentencia, pero luego se utilizaría una expresión HubL para imprimir la variable.
El último tipo de delimitador que puedes encontrar o decidir emplear mientras desarrollas con HubL, es un comentario HubL. Los comentarios son definidos por un {#.
Los módulos son áreas dinámicas de una plantilla que pueden ser personalizadas por el usuario final en el editor de contenidos. Por ejemplo, si estuvieras codificando un archivo de plantilla desde cero, agregarías módulos a las plantillas con etiquetas HubL, para dar a tus creadores de contenido la capacidad de editar áreas de la página.
Las etiquetas de los módulos están formadas por los siguientes componentes:
- Tipo de módulo: especifica qué módulo se va a renderizar. Consulta la página Etiquetas admitidas por HubL para obtener una lista de los diferentes tipos de módulos disponibles.
- Un nombre único para ese módulo: da al módulo una identidad única en el contexto de la plantilla.
- Ruta: dependiendo de la etiqueta, define la ubicación del módulo en el administrador de diseño. La ruta de acceso a los módulos por opción predeterminada de HubSpot debe empezar siempre por @hubspot/ seguido del tipo de módulo. Para más información, consulta página sobre el uso de módulos en plantillas.
- Parámetros: especifica opcionalmente información adicional del módulo.
El ejemplo anterior es un módulo de texto con los parámetros de etiqueta y valor definidos. La etiqueta define el texto de ayuda en el editor y el valor establece el texto predeterminado para ese módulo. Consulta el gif de ejemplo a continuación para ver cómo se ve esto dentro del editor.
HubL incluye muchas variables predefinidas de HubSpot que imprimen sus valores útiles desde la aplicación. Además, puedes definir tus propias variables en una plantilla. En el siguiente ejemplo, una variable llamada primaryColor se define en una sentencia y luego se imprime con una expresión HubL. Este ejemplo mezcla la variable HubL con CSS.
Las macros HubL te permiten imprimir varias sentencias con un valor dinámico. Esta técnica resulta útil cuando te encuentras escribiendo los mismos bloques de código básico una y otra vez, pero sólo necesitas cambiar ciertos valores. En el siguiente ejemplo, se utiliza una macro para imprimir una propiedad de transición CSS3 que incluye todos los prefijos del vendedor. Puedes aprender más sobre las macros, aquí
Se pueden agregar filtros a tu HubL para transformar o alterar el valor de una variable de plantilla. Un ejemplo sencillo que se muestra a continuación es el de formatear una variable de fecha. Los filtros utilizan un | (símbolo de pipeline) y se aplican sin espacios a una variable.
En el ejemplo siguiente, supongamos que una publicación del blog se publicó el 29 de abril. La fecha de publicación del post se formatea con un filtro datetimeformat. Puedes ver una lista completa de filtros aquí.
Mientras que los filtros afectan a la representación de las variables, las funciones procesan la información del valor y de la cuenta y la representan. Por ejemplo, se puede utilizar una función para obtener el número total de publicaciones de un determinado blog o para aclarar/oscurecer una variable de color en una cantidad determinada.
El ejemplo imprimiría el número total de publicaciones del blog de designers.hubspot.com/blog. Este utiliza un parámetro de ID de blog (disponible en la URL del panel del blog) para especificar a qué blog debe dirigirse. Puedes ver la lista completa de funciones aquí.
Las sentencias If te permiten usar la lógica condicional para dictar cómo tu plantilla renderizará la lógica condicional en las sentencias HubL para if, elif, else y endif. Una sentencia if debe comenzar con un if y terminar con un endif.
El siguiente ejemplo define un módulo de elección que permite al usuario final seleccionar un departamento de un desplegable. Dependiendo de lo que el usuario seleccione en el editor, la plantilla generará un encabezado dinámico para una página de carreras. Este ejemplo requiere el uso del parámetro export_to_template_context.
Los bucles for permiten iterar sobre los elementos almacenados en una secuencia. Lo más común es que se utilicen para renderizar el contenido de un blog en formato de listado. Los bucles for comienzan con una sentencia for y terminan con una sentencia endfor.
En el siguiente ejemplo, una matriz de tipos de osos se almacena como una variable llamada bears. Se utiliza un bucle for para iterar a través de los diferentes tipos de osos imprimiendo un elemento de la lista para cada tipo.
A continuación se presentan algunas otras características de las plantillas que pueden ser útiles, a medida que desarrollas con HubL.
Muchos otros idiomas comparten los mismos delimitadores que HubL, lo que puede crear problemas al trabajar en archivos codificados en el CMS. Si quieres utilizar un delimitador HubL para un idioma diferente, tienes que envolver ese código:
Puedes incluir varios archivos .html en una plantilla HubL utilizando la etiqueta include. Para crear un archivo HTML que no requiera las variables de la plantilla estándar, debes desmarcar la opción "Hacer que la plantilla esté disponible para el nuevo contenido" La sintaxis se muestra a continuación:
También puedes compilar varios archivos CSS en un solo archivo CSS con la misma etiqueta de inclusión. Cuando publiques el archivo padre, el archivo hijo se compilará en un único archivo CSS minificado con el código del padre
Cuando creas plantillas complejas, puedes utilizar la creación de bloques compartimentados que amplíen una plantilla principal.
En primer lugar, crearás una plantilla principal que incluya las variables requeridas standard_header_includes y standard_footer_includes. Dentro de esa plantilla, necesitas definir un bloque único usando la siguiente sintaxis donde my_sidebar es un nombre único:
A continuación, puedes crear un archivo HTML hijo que rellene ese bloque. En primer lugar, debes declarar una declaración extends que haga referencia a la ruta del padre. Este bloque de código se renderizaría en la plantilla principal pero se mantendría en otro archivo más pequeño y manejable. Esta técnica no es para todo el mundo, pero puede ser útil para mantenerse organizado cuando se codifican plantillas complejas de correo electrónico o de páginas. Cuando se utiliza esta técnica, se debe elegir la plantilla infantil, al crear el contenido.
En el editor de páginas, puedes copiar el marcado HubL para una sección de arrastrar y soltar para reutilizar el código según sea necesario. Esto puede ser útil cuando se quiere recrear una sección de arrastrar y soltar en un archivo codificado.
Más información sobre la copia de la sección HubL.
Gracias por tus comentarios, son muy importantes para nosotros.