HTML+HubLテンプレート

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

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

画像1-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に変更できます。

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

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

テンプレートアノテーション
アノテーション説明可能性のある値
templateType
Specifies which template type a file is.
isAvailableForNewContent
Specifies if a template is available for selection in the content creation process.

true、false

enableDomainStylesheets
Specifies if the template should load stylesheets defined under settings > website > pages

true、false

Label
User friendly description of the template, displayed in the template selection screen

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を設定して使用します。

{% 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つです。

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

ブロックと拡張

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

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

{% block body %} <!-- Default content if template isAvailableForNewContent and chosen as a page template --> {% endblock body %}
{% 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フォルダー内のテンプレートで拡張しています。

グローバルグループ

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

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

参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。