HubLチートシート

区切り文字

{# A module's heading field #}
<h1>{{ module.heading }}</h1>

変数

独自の変数はsetで設定します。文字列、数値、ブール値、リスト、辞書は、Jinjaと同じように使えます。

{% set title = "Pricing" %}
{% set sizes = [480, 960, 1440] %}
{% set button = {"label": "Start free", "url": "/start/"} %}

{{ title ~ " | transjt" }}    {# ~ joins strings #}
{{ sizes[0] }}                {# 480 #}
{{ button.label }}            {# or button["label"] #}
{% do sizes.append(1920) %}   {# change a list in place #}

HubSpotは、すべてのページで次の変数を提供します。

ifとfor

{% if module.items %}
  <ul>
  {% for item in module.items %}
    <li class="{{ 'is-first' if loop.first else '' }}">{{ loop.index }}. {{ item.title }}</li>
  {% endfor %}
  </ul>
{% elif is_in_editor %}
  <p>Add an item in the sidebar.</p>
{% else %}
  {# Nothing to show on the live page #}
{% endif %}

• ループ内：loop.index（1始まり）、loop.index0（0始まり）、loop.first、loop.last、loop.length。
• {% unless condition %} … {% endunless %}はifの逆です。
• テストは英語の文のように書けます：{% if module.subtitle is defined %}、is string、is number、is even、is divisibleby 3。
• 演算子：==、!=、and、or、not、in。

フィルター

フィルターはパイプの後に書いて値を変換します（{{ value|filter }}）。複数のフィルターは、左から右へ順につなげられます。

関数

{% for post in blog_recent_posts("default", 3) %}
  <a href="{{ post.absolute_url }}">{{ post.name }}</a>
{% endfor %}

タグ

すべてのページテンプレートには、{{ standard_header_includes }}を閉じタグ</head>の前に、{{ standard_footer_includes }}を閉じタグ</body>の前に入れる必要があります。これらは、HubSpot自体のスクリプト、スタイル、トラッキングを読み込みます。

<!--
  templateType: page
  isAvailableForNewContent: true
  label: Landing page
-->
{% extends "./layouts/base.html" %}
{% block body %}
  {% dnd_area "main" label="Main" %}
    {% dnd_section %}
      {% dnd_column %}
        {% dnd_row %}
          {% dnd_module path="@hubspot/rich_text" %}{% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}
  {% end_dnd_area %}
{% endblock %}

モジュールとフィールド

モジュールは名前が.moduleで終わるフォルダーで、module.html（HubL）、module.css、module.js、fields.json、meta.jsonを含みます。module.htmlでは、各フィールドをmodule.＋フィールド名で参照します。

{% set img = module.image %}
<section class="hero hero--{{ name }}">
  {% inline_text field="heading" value="{{ module.heading }}" %}
  {% if img.src %}
    <img src="{{ img.src }}" alt="{{ img.alt|escape_attr }}" width="{{ img.width }}" height="{{ img.height }}" loading="lazy">
  {% endif %}
</section>

• {{ name }}は、モジュールインスタンスの一意の名前です。CSSを1つのインスタンスだけに適用するときに使います。
• inline_textとinline_rich_textを使うと、エディターでページ上のフィールドを直接編集できるようになります。
• module.cssではHubLがほとんど使えず（module_asset_urlなどのヘルパーのみ）、フィールドの値も読み取れません。module.jsではHubLは一切使えません。フィールドの値を使うには、{% require_css %}ブロックをmodule.htmlに置きます。
• フィールドで選んだ色をインラインのstyle=""で出力すると、モジュールのCSSより優先されます。スタイルが変わらないときは、まずmodule.htmlを確認してください。

デバッグ

• {{ module|pprint }}は、値をその型とともにページ上に直接出力します。公開する前に削除してください。
• 公開中のページのURLに?hsDebug=trueを付けると、CSSとJavaScriptが圧縮・結合されずに読み込まれ、キャッシュは一切使われません。また、ページのソースの末尾に、HubLのエラーと警告、レンダリング時間、ページをプリレンダリングできるかどうかが表示されます。
• デザインマネージャーでは、編集中のファイルでHubLのエラーが表示されます。HubSpot CLIでは、hs cms lint <path>でファイルをチェックでき、アップロード時には致命的なエラーがターミナルに表示されます。
• 更新したモジュールやテンプレートを使っているページは、HubSpotが自動的に再レンダリングします。これには数分かかることがあります。公開中のページに古いバージョンが表示されたままなら、もう一度公開してください。

transjtテーマのHubL

デザインやAIで作ったサイトをエクスポートすると、transjtがテーマを書き上げます。ドラッグ＆ドロップエリアを備えたテンプレートと、セクションごとに1つのモジュールで、各モジュールのテキスト、画像、リンク、色はフィールドになります。マーケティングチームはページエディターでそのフィールドを編集するので、誰もHubLを書く必要はありません。

テーマを自分で調整するときは、独自のCSSとJavaScriptをcustom.cssとcustom.jsに書いてください。再エクスポートしても、そのまま残ります。詳しくはHubSpot開発者向けとHubSpotでテーマを使うをご覧ください。

HubLの完全なリファレンスは、HubSpotの開発者向けドキュメントにあります。