HTML+HubLテンプレート

HTML+HubLテンプレートは、CMS Hubのテンプレートのタイプごとに使用できます。このテンプレートはHubLテンプレート言語をサポートする.htmlファイルです。このようなHubL対応のコードテンプレートのプレビューには、デザインマネージャーのテンプレートプレビューまたはサンドボックスアカウントを使用するのが最適です。HTML+HubLテンプレートにはパーシャルを含めることができます。パーシャルはヘッダーやフッターなど、共通の要素に使用するコードを分ける際に使用できます。

HTML+HubLテンプレートを使用すると、開発者はビジュアル デザイン マネージャーのドラッグ&ドロップ方式のテンプレートを使用する場合よりも柔軟に制御できます。これにより、開発者はドラッグ&ドロップ機能を使用して、HTML+HubLテンプレートではなければ実現できない、快適な編集環境を制作担当者に提供できます。
image1-2

上のスクリーンショットは、cms-theme-boilerplateに含まれているbase.htmlファイルの例です。このボイラープレートは、HubSpotのCMSソフトウェアで効果的なウェブサイトを構築する際の開発を始めやすさを考慮して設計されています。ボイラープレートには、HubSpotが提唱するベストプラクティスが反映されています。HubSpotがボイラープレートを作成した目的として、開発者からのフィードバックと類似したプロジェクトからの教訓を得る考えもあります。ぜひこのボイラープレートからインスピレーションを得て、ウェブサイトプロジェクトを迅速に進めてみてください。

習熟度とツール選び

HTML+HubLテンプレートはコード化されたファイルなので、開発者の手元にある既存のツールを使用してローカル環境でも編集できます。ローカル開発に最適な方法は、HubSpotのローカル開発ツールを使用することです。これらのツールを使用すれば、デベロッパー ファイル システムとファイルマネージャーのファイルを安全にアップロード取得監視作成できます。

他のテンプレート作成言語に慣れている開発者は、HTMLを中心にHubLを付加したこれらのテンプレートと、使用経験のある他のテンプレート作成言語との類似点をすぐに発見できるはずです。したがって、他のプラットフォームから簡単に移行できます。主な違いは、HubSpotでは、制作担当者にとって最適な使いやすい環境の提供に注力していること、そしてメンテナンス作業とパフォーマンス最適化の作業の負担の大部分を開発者から取り除いていることです。 

例えば、CSSファイルを読み込む場合に、HubSpotではスタイルシートに<link rel="stylesheet" type="text/css" href="theme.css">を使用するのではなく、テンプレートレベルでrequiresを使用して、モジュール固有のCSSをモジュールおよびmeta.json内に維持することを推奨しています。

この手法の利点は、条件に応じてCSSを読み込む処理を、開発者(と開発ツール)ではなくHubSpotに任せられることです。CMS Hubは、制作担当者がモジュールにインスタンスを追加したかどうかを把握して、必要なCSSを条件に応じて読み込むことができます。読み込むCSSを必要なものだけに限定すると、読み込み時間を短縮できます。CMS Hubはさらにパフォーマンスを向上させるために、このCSSのミニフィケーションを行って必要に応じてファイルを集約し、CDNを介して自動的に配信します。開発者がこのことに対応する必要はありません。

HubSpotでの開発を容易にするために、コミュニティーとHubSpotが作成したツールを使用できます。HubLはJingaをベースにした言語であり、大部分のところは同じ構文に従っているため、通常はjinjava対応のローカルエディターで、HTML+HubLの構文強調表示機能を拡張する言語プラグインを使用できます。

テンプレートアノテーション

ローカル環境への対応策として、テンプレートアノテーションによってHubSpotの重要なテンプレート設定が示されています。アノテーションはコードの一部であることから、後でtemplateTypeに変更できます。

HTML
<!--
  templateType: page
  isAvailableForNewContent: false
  enableDomainStylesheets: false
  label: Homepage
  screenshotPath: ../images/template-previews/home.png
-->

<!doctype html>

<html>
...

テンプレート設定によって、テンプレートを制作担当者に表示するかどうか、表示する場合はどのように表示するか、ドメイン全体のスタイルシートを使用するかどうかが決まります。

テンプレートアノテーション
アノテーション説明可能性のある値
templateType
ファイルのテンプレートタイプを指定します。
isAvailableForNewContent
コンテンツ作成プロセスでテンプレートを選択できるかどうかを指定します。

true、false

enableDomainStylesheets
[設定]>[ウェブサイト]>[ページ]に定義されたスタイルシートをテンプレートに読み込むかどうかを指定します。

true、false

Label
テンプレートに付ける分かりやすい説明。テンプレート選択画面に表示されます。

About Page、Homepage、Pricing、任意のカスタム文字列

screenshotPath
String

制作担当者がテンプレートを選択するときに使用するスクリーンショットを表します。このスクリーンショットによってテンプレートの区別が簡単になります。

ヘッダーとフッターのインクルード

ファイルがテンプレートパーシャルでない限り、HubSpotのテンプレートを使用するには2つのタグが必要です。この2つのタグを次に示します。

  • {{ standard_header_includes }}:必要なCSSを結合してミニフィケーションし、自動的に追加するために使用します。 
  • {{ standard_footer_includes }}:HubSpotトラッキングスクリプトやモジュールなどの要素で使用するJavaScriptをページの下部に動的に追加するために使用します。

これらのタグは、テンプレート内に存在するか、またはテンプレートの子パーシャルとして公開して使用する必要があります。

パーシャル

テンプレートパーシャルは、他のコードファイルにインクルードできるHTML+HubLフィールドです。テンプレートパーシャルを使用することで、開発者は複雑なドキュメントをモジュール方式で作成したり、複数のテンプレートの間でマークアップを共有したりできます。テンプレートパーシャルの一般的な使用例としては、ヘッダー、フッター、サイドバーなどがあります。これらの要素は通常、サイト全体で共通であるため、パーシャルを使用するとコンテンツの管理が容易になります。通常必要なテンプレート変数を必要としないHTMLファイルを作成するには、ファイルの先頭にアノテーションisAvailableForNewContent: falseを含める必要があります。

標準パーシャル

個別のページで編集できるコンテンツが含まれる複数のテンプレートで使用できるテンプレートパーシャルのタイプ。templateType: pageisAvailableForNewContent: falseを設定して使用します。

HubL
{% include "../partial/sidebar.html" %}

また、includeタグを使用して、複数のCSSファイルを1つのCSSファイルにコンパイルできます。親ファイルを公開すると、インクルードされるファイルが親と子の両方のCSSを持つ1つのファイルにコンパイルされて、このファイルがミニフィケーションされます。cms-theme-boilerplateのCSSでは、ファイルの下部でこの手法を使用して、複数のCSSファイルを1つのファイルに結合しています。

グローバルパーシャル

グローバルに編集できるコンテンツが含まれる複数のテンプレートで使用できるテンプレートパーシャルのタイプ。グローバルパーシャルは、アノテーションtemplateType: global_partialを指定して利用します。通常はヘッダーとフッターとして使用されます。cms-theme-boilerplateでは、ヘッダーフッターにこの手法が使用されています。これらのパーシャルは、base.html内でglobal_partialタグを使用して呼び出されます。グローバルパーシャルは、グローバルコンテンツの1つです。

HubL
{% global_partial path="../partials/header.html" %}

ブロックと拡張

複雑なテンプレートを作成するときは、マスターテンプレートを拡張する区画となるブロックを作成できます。この手法はすべてのユーザー向けではありませんが、複雑なテンプレートをコーディングする際に、整理された状態を維持する上で役立ちます。

例えば、standard_header_includes変数とstandard_footer_includes変数を含むマスターテンプレートを作成できます。そのテンプレート内で、以下の構文を使用して一意のブロックを定義します。bodyは重複しない名前にします。

HubL
{% block body %}
        <!-- テンプレートAvailableForNewContentがページテンプレートとして選択されている場合の既定のコンテンツ -->
{% endblock body %}
HubL
{% extends "./layouts/base.html" %}
{% block body %}
<h3>Page Content</h3>
<ul>
  <li>Bullet 1<li>
  <li>Bullet 2<li>
  <li>Bullet 3<li>
</ul>
{% endblock %}

cms-theme-boilerplatebase.htmlでは、この手法を使用して、templatesフォルダー内のテンプレートで拡張しています。

グローバルグループ

デザインマネージャーでドラッグ&ドロップ テンプレートを使用して作成したグローバルグループを含めることもできます。以下に構文を示します。

HubL
{% include "/path/to/global_header.template.json" %}

参考になりましたか? *
こちらのフォームには開発者向けドキュメントに関するご意見をお聞かせください。なお、HubSpot製品に関するご意見は、アイデアフォーラム(英語)にお寄せください。