インバウンドマーケティング統合型プラットフォームの「Hubspot」の一部であるCMS機能を使いウェブサイトを構築してみます。

HubL

発音：ハボル？！を使って書き上げます。HubLはテンプレートエンジンであるJinjaをベースにしているそうです。 Jinjaに触れたことも見たこともないのでとりあえず進めてみます。

Delimiters (デリミタ)

ここからステイトメントだよ、と示す場合にデリミタを使います。Stateme, Expression, Epxression Statement, Comments があります。

Modules (モジュール)

ModuleはCMSを管理している人が編集することのできるパーツになります。

例：
HubL

{% text "simple_section_title" label='Enter text for this section title', value='This is a section title' %}

Output

<span id="hs_cos_wrapper_simple_section_title" class="highlight hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text"
style="" data-hs-cos-general-type="widget" data-hs-cos-type="text">
This is a section title
</span>

Variables and macros (変数とマクロ)

下記のように変数を設定することもできます。

例：
HubL

{% set primaryColor = '#F7761F' %} {# defines variable and assigns HEX color #}
        
a {
color: {{ primaryColor }}; {# prints variable HEX value #}
    }

Output

a {
   color:#F7761F;
}

Filters and Function (フィルターとファンクション）

下記のように変数を入れ替えることができます。

HubL

{{ content.publish_date_local_time|datetimeformat('%B %e, %Y') }}

Output

April 29, 2015

If (もし？)

選択された変数値によって表示を下記のように制御することができます。

{% choice "department" 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 %}

For loops　(ループ処理)

下記のようにループ処理することができます。

{% set bears = ['panda bear', 'polar bear', 'black bear', 'grizzly bear', 'koala bear'] %}

HubL

<h1>Types of bears</h1>;
<ul>
{% for bear in bears %}
<li>{{ bear }}</li>
{% endfor %}
</ul>

Output

<h1>Types of bears</h1>
<ul>
<li>panda bear</li>
<li>polar bear</li>
<li>black bear</li>
<li>grizzly bear</li>
<li>koala bear</li>
</ul>

Include

テンプレート内に他のファイルも簡単にインクルードすることができます。

{% include "custom/page/web_page_basic/my_footer.html" %}
{% include 'generated_global_groups/2781996615.html' %}
{% include "hubspot/styles/patches/recommended.css" %}

Block

より複雑なサイトを構築するために各コンポーネントをブロック化することができます。

{% extends "custom/page/web_page_basic/my_template.html" %}
{% block my_sidebar %}
<h3>Sidebar title</h3>
<ul>
<li>Bullet 1<li>
<li>Bullet 2<li>
<li>Bullet 3<li>
</ul>
{% endblock %}

一旦基本はここまでです。次は実際に構築してみます。