[Hubspot] でウェブサイトを構築
インバウンドマーケティング統合型プラットフォームの「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 %}
一旦基本はここまでです。 次は実際に構築してみます。
Author And Source
この問題について([Hubspot] でウェブサイトを構築), 我々は、より多くの情報をここで見つけました https://qiita.com/syantien/items/90cbf0439f9faef6a67f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .