Help us understand the problem. What is going on with this article?

[Hubspot] でウェブサイトを構築

More than 1 year has passed since last update.

インバウンドマーケティング統合型プラットフォームの「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 %}

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

syantien
トランスコスモス技術研究所にて様々な開発案件を進めています。最近はKotlin頑張ってます。開発メンバー絶賛採用中。このどれかのキーワードでビビっと来た人は面談にお越しください。「ASP.NET C#」, 「Kotlin」,「Swift」,「Angular」,「QA」,「UXデザイナー」,「データサイエンティスト」,「海外開発案件挑戦してみたい」,「Shopify」。
http://syantien.hatenablog.com/
trnd
ソフトウェア・ウェブサービス開発時に読み返せる記事をまとめています。
https://t-rnd.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away