HubL Reference

Table of contents
Close

How to create a glossary of terms for multilingual templates

The HubSpot COS hosts sites from companies around the world, in many different languages. Building large multilingual sites can prove to be a challenge for many organizations. To make this easier, HubSpot integrates with several services that allow page content to be translated and reinjected into cloned version of the pages. While you may choose to create language-specific templates, you can also use HubL to create a centralized glossary file used to update template terms dynamically based on the URL of your site.

In this tutorial, you will create an imported Design Manager HubL file that acts as a glossary of template strings in different languages. If statements will be used to determine which language should render based on the URL of the page. You can then call these string variables throughout your template. This solution gives you the ability to maintain all the template strings, in different languges, in a single file. Updates to this file propagate throughout the template and custom modules.

Create a .html file

Navigate to Design Manager and create a new coded template. Make sure you save it with .html file extension. Once you have created the .html file, clear out the prepopulated markup.

HubSpot Help article screenshot

Identify the variable for your URL structure

Multilingual sites can have a variety of different URL structures; therefore, you will need to identify the variable that you will use to determine which language's template terms should load. Below are two examples of content variables and their values for the Spanish search results page http://knowledge.hubspot.com/es/search:

  • content.sluges/search
  • content.domainhttp://www.knowledge.hubspot.com

If your multilingual URL structure uses subdirectories, you will most likely want to choose content.slug; whereas, if it uses different domains, you will most likely want to use content.domainYou can always use Developer Info on a page to check what values are being stored in the template context.

Add conditional logic

Once you have selected the variable that you will use to test the URL structure with, you will want to write your if statements to determine which set of terms to load.

Below is a set of if statements for domains and subdirectories. The subdirectory approach has two conditions per statement, because it should evaluate to true for both paths within the subdirectory (ie knowledge.hubspot.com/es/search) and when the path does not include a trailing / (ie help.hubspot.com/es). 


{# If statements for sites using language code subdirectories #}
{% if (content.slug is string_startingwith "es/") or (content.slug =="es")  %}

{% elif (content.slug is string_startingwith "de/") or (content.slug =="de")  %}

{% else %}

{% endif %}


{# If statements for sites using language code domains #}
{% if content.domain == "hubspot.es" %}

{% elif content.domain == "hubspot.de" %}

{% else %}

{% endif %}

Set variables within the if statements

Within each each if statment define string variables for the terms that you would like to print in each language. Reset the same variable name for each language and assign a different value. The example below stores string variables: 'Hello' and 'world'.


{# If statements for sites using language code subdirectories #}
{% if (content.slug is string_startingwith "es/") or (content.slug =="es")  %}
     {% set greeting ="Hola" %}
     {% set world ="mundo" %}
{% elif (content.slug is string_startingwith "de/") or (content.slug =="de")  %}
     {% set greeting ="Hallo" %}
     {% set world ="welt" %}
{% else %}
     {% set greeting ="Hello" %}
     {% set world ="world" %}
{% endif %}


{# If statements for sites using language code domains #}
{% if content.domain == "hubspot.es" %}
     {% set greeting ="Hola" %}
     {% set world ="mundo" %}
{% elif content.domain == "hubspot.de" %}
     {% set greeting ="Hallo" %}
     {% set world ="welt" %}
{% else %}
     {% set greeting ="Hello" %}
     {% set world ="world" %}
{% endif %}

 Publish the file and uncheck the option to "Make this template available for new content". Unchecking this option bypasses the template validation for the required template tags.

Import file into a template and print variables

Now that you have created a glossary html file, you can import it into your template. Once imported, you can print the variables throughout the template and custom modules. The variables will automatically update to the appropriate language based on the request URL. For example, the request went to an /es/ subdirectory, the markup with print the Spanish greeting.


{% import "custom/page/web_page_basic/glossary.html" as lang %}

<h1>{{ lang.greeting }} {{ lang.world }}</h1>
     
    
<h1>Hola mundo</h1>