When building custom websites in HubSpot Content Hub, developers often use HubL, which is HubSpot’s templating language. HubL allows developers to create dynamic templates, pull data from HubSpot objects, and control how content appears on pages.
HubL works alongside HTML, CSS, and JavaScript to power many of the templates and modules used in HubSpot websites.
Understanding how HubSpot Content Hub HubL works helps developers build more flexible and dynamic website experiences.
HubL stands for HubSpot Markup Language. It is a server-side templating language used to generate dynamic content inside HubSpot templates and modules.
HubL allows developers to:
HubL syntax is typically embedded within HTML templates.
HubL is commonly used in several areas within HubSpot Content Hub, including:
Developers use HubL to control how templates render content when pages load.
HubL uses a syntax that is similar to many other templating languages.
For example, variables can be inserted into templates using double curly brackets.
Example:
{{content.name}}This code can dynamically display the name of a page or content item.
HubL allows developers to display different content depending on certain conditions.
For example, a template might show different content depending on whether a user is logged in.
Example:
{% if contact.firstname %} Hello {{ contact.firstname }} {% else %} Hello visitor {% endif %}This logic allows templates to display personalized or conditional content.
HubL also allows developers to loop through lists of data.
This is often used for displaying multiple items such as blog posts or resources.
Example:
{% for post in blog_recent_posts %}This code automatically generates a list of blog posts within the template.
HubSpot Content Hub HubL is the templating language used to create dynamic templates and modules. By combining HubL with HTML, CSS, and JavaScript, developers can build flexible website structures that automatically display content from the HubSpot platform.