export_to_template_context
é um parâmetro que disponibiliza os parâmetros de uma tag HubL para o ambiente de modelo sem realmente renderizar a tag HubL. Esse parâmetro pode ser usado com todas as tags HubL. O widget_data
dict é usado para recuperar esses parâmetros, armazená-los em variáveis e/ou incorporá-los à lógica do seu modelo.
Ao disponibilizar os parâmetros de uma tag HubL no contexto do modelo sem renderizá-la, você pode permitir que os usuários tomem decisões no editor de conteúdo que afetem a forma como o modelo é renderizado. Por exemplo, digamos que você queira renderizar apenas um determinado bloco de código quando o usuário atribuir um valor a um campo. Isso se torna possível com esse parâmetro.
Primeiro, você deve adicionar export_to_template_context=True
à tag HubL. Em seguida, você deve usar um parâmetro widget_data.module.parameter_you_want_to_retreive
.
{% module "job_title" path="@hubspot/text", label="Enter a Job Title", value="Chief Morale Officer", export_to_template_context=True %}
{# Makes the parameters available to be stored and used in template logic #}
{{ widget_data.job_title.body.value }}
{# Prints the value of the HubL tag but can also be used in template logic #}
Veja abaixo algumas aplicações deste conceito.
export_to_template_context=True
não é suportado em módulos personalizados, pois não serve para eles em nenhum propósito real. Você não precisa usar export_to_template_context
para obter o valor de um módulo dentro de um modelo, basta acessá-lo. Se você precisar ocultar visualmente a saída do módulo, poderá criar o módulo para que não haja saída ou incluir um campo booleano que habilite ou desabilite a renderização de algo.
Neste exemplo, uma tag HubL de imagem é criada, mas depois exportada para o contexto do modelo, em vez de renderizada. O parâmetro src
é recuperado com a tag widget_data
e renderizado como a fonte de uma imagem de fundo em uma tag de estilo.
xxxxxxxxxx
{% module "background_image" path="@hubspot/image" label='Select a background image',
src='http://cdn2.hubspot.net/hub/428357/file-2117441560-jpg/img/dev-bg-compressed.jpg',
export_to_template_context=True %}
<!--Sample markup -->
<div class="bg-image-section" style="background:url('{{ widget_data.background_image.src }}'); background-size:cover; min-height: 500px;">
<h1>Supercharge your app with HubSpot</h1>
<h3>Build powerful integrations for a global community of users</h3>
</div>
Embora isso seja possível em modelos codificados, é recomendado criar um módulo personalizado para oferecer a melhor experiência aos usuários no editor de páginas. Tags HubL como essa são exibidas como campos individuais, embora você possa ter vários campos relacionados. Em um módulo personalizado todos os seus campos são exibidos de modo agrupado no editor de páginas.
O exemplo a seguir usa o parâmetro export_to_template_context
com um módulo de escolha para alterar uma mensagem de banner em uma página de carreiras. O usuário seleciona um departamento por meio da IU e o cabeçalho é alterado sem que ele precise editar o conteúdo.
xxxxxxxxxx
{% module "department" path="@hubspot/choice", label="Choose department", value="Marketing", choices="Marketing, Sales, Dev, Services" export_to_template_context=True %}
{% if widget_data.department.value == "Marketing" %}
<h3>Want to join our amazing Marketing team?!</h3>
<h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4>
{% elif widget_data.department.value == "Sales" %}
<h3>Are you a Sales superstar?</h3>
<h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4>
{% elif widget_data.department.value == "Dev" %}
<h3>Do you love to ship code?</h3>
<h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4>
{% else %}
<h3>Want to work with our awesome customers?</h3>
<h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4>
{% endif %}
Essa mesma funcionalidade pode ser reproduzida usando um campo de escolha dentro de um módulo personalizado. A IU do módulo personalizado realmente torna as opções de escolha com um valor e um rótulo muito fáceis.
Se você quiser recuperar um parâmetro de um módulo ou tag renderizado em uma página, o módulo poderá ser acessado dentro de um dict chamado widgets
. O parâmetro export_to_template_context
não é obrigatório. A sintaxe é a seguinte:
xxxxxxxxxx
// HubL
{{ content.widgets.name_of_module.body.parameter }}
{{ content.widgets.my_text.body.value }}
Observação:
O método acima não é compatível com a recuperação de valores de campos em módulos globais, já que content.widgets
não acessará os módulos globais.
Como campos diferentes armazenam dados em formatos diferentes, muitas vezes é útil utilizar as Informações do desenvolvedor para ver como acessar os dados específicos que deseja exibir.
Embora os modelos de blog sejam geralmente usados para blogs, eles também podem ser reaproveitados para criar vários outros tipos de listagens. Você pode usar as técnicas descritas acima para fazer isso.
Por exemplo, talvez você queira criar um layout de listagem de imprensa que sua empresa recebeu, mas em vez de vincular a posts, prefere que a listagem seja vinculada a outra página.
Você pode ver esse conceito em ação em academy.hubspot.com/projects. A página de listagem de projetos é um modelo de listagem de blog, mas cada post vincula a uma página regular da HubSpot. O criador de conteúdo especifica o link de destino no editor.
No cabeçalho do código do post do blog individual, você definiria um campo de texto. Se você não quiser que o texto seja renderizado no post, use export_to_template_context
.
xxxxxxxxxx
{% module "custom_blog_link" path="@hubspot/text", label="Link to external press item", export_to_template_context=True %}
Esse campo de texto é editável em cada post do blog. Em seguida, é preciso definir um link na listagem. No entanto, como o widget_data só existe no contexto do post, é necessário usar uma sintaxe diferente para buscar os dados do widget para preencher o link. Nesse caso, use content.widgets.custom_blog_link.body.value
. Embora o widget_data
não esteja disponível para a listagem do blog, o valor desse campo ainda é armazenado no contexto dos widgets do conteúdo individual.
Veja abaixo um loop básico de listagem de blog que renderiza esse link personalizado com cada post. Se estiver usando essa técnica, convém adicionar o subdiretório criado automaticamente para cada post do blog ao seu arquivo robots.txt para evitar que esses posts vazios sejam rastreados pelo Google e outros rastreadores.
xxxxxxxxxx
{% for content in contents %}
<a href="{{ content.widgets.custom_blog_link.body.value }}">
Click here to see this press feature!
</a>
{% endfor %}