ブログテンプレート

サポートされる製品

次のいずれかの製品またはそれ以上が必要です。

Marketing Hub -Professional

Content Hub -Starter

HubSpotのブログは、ブログリストページと個別のブログ記事で構成されます。ブログリストページテンプレートは個別のブログ記事をリスト化するために使用されるほか、執筆者およびタグのリストページをレンダリングするためにも使用されます。リストページ用とブログ記事用にそれぞれ個別のテンプレートを作成することも、両方を含めて全てのページをレンダリングする共通のテンプレートを作成することも可能です。この記事では、ブログテンプレートのマークアップ、テンプレートを構成する要素、そしてカスタマイズのオプションについて説明します。

リストページと記事の共通テンプレートを作成する

リストページと記事の両方をレンダリングする共通のテンプレートを作成するには、テンプレートファイルの先頭にtemplateType: blogアノテーションを追加します。共通のテンプレートを両方のレンダリングに使用する場合は、if文を使用して、ユーザーがリストページと個別の記事のどちらを表示しているかを評価します。デザインマネージャーのドラッグ＆ドロップレイアウトを使用している場合、ブログコンテンツモジュールボタンのUIにこのif文が組み込まれます。 if is_listing_viewステートメントを使用すると、記事とリストのコードを別々に書くことができます。

{% if is_listing_view %}
    Markup for blog listing template
{% else %}
    Markup for blog post template
{% endif %}

リストページ用と記事用に個別のテンプレートを作成する

ブログ記事とリストページに別々のテンプレートを用意することも可能です。個別のテンプレートを使用することにより、開発者はコードがすっきりして読みやすく、コンテンツ作成者はテンプレートを選びやすくなります。共通のテンプレートでは先頭にtemplateType: blogアノテーションを挿入しますが、各ページ用に個別のテンプレートを作成する場合はそれに代わり、テンプレートの先頭にそれぞれ以下のアノテーションを追加します。

ブログ記事テンプレートtemplateType: blog_post
ブログリストテンプレートtemplateType: blog_listing

記事テンプレートとリストページテンプレートを別々に作成する場合、is_listing_viewチェックは必要ありません。代わりに、アカウントのブログ設定で個別のテンプレートを手動で選択します。また、共通のブログテンプレートを、リストページ用もしくは記事用のテンプレートに移行することも可能です。

リストページテンプレート

テンプレートにtemplateType: blog_listingアノテーションを挿入すると、［ブログ設定］の下のセクションでリストページ用のテンプレートとして選択できるようになります。コンテンツ作成者はこのテンプレートタイプを使用して、ページエディター内でリストページを編集することも可能です。さらに、テンプレートにドラッグ＆ドロップエリアも含めることで、他のCMSページと同様にページエディターにおけるモジュールの追加や削除が可能になります。ドラッグ＆ドロップエリアの追加例に関して、詳しくはCMSボイラープレートのブログテンプレートをご覧ください。記事のリストは、ブログ記事を反復処理するforループによって生成されます。contentsは、そのブログに含まれる全ての記事を含む事前定義されたコンテンツシーケンスです。

{% for content in contents %}
    <div class="post-item">
        Post item markup that renders with each iteration.
    </div>
{% endfor %}

ブログリストページテンプレートの全てのテキスト文字列は、フィールドで制御することをお勧めします。これにより、多言語ブログの作成が容易になり、コンテンツ作成者の操作性が向上します。

ブログリストページモジュールを作成する

コンテンツ作成者がモジュールをブログリストページ内コンテンツの周囲（側面や上下など）に配置することを許可できます。これを有効にするには、ブログリストのforループを使用したブログリストモジュールを作成することをお勧めします。例については、CMSボイラープレートのブログリストページモジュールをご参照ください。 HubSpotは、サマリーの表示やキービジュアルを使用するためのブログ設定を提供していますが、これらの機能をモジュールに組み込むこともできます。モジュールへの組み込みにより、コンテンツ作成者はブログの設定ページへ切り替えることなく、ページエディター内で必要な機能を使用できるようになります。

ブログ執筆者、タグ、シンプルリストページ

HubSpotブログにはブログ記事とブログリストページに加えて、ブログ執筆者用のページ、ブログ記事のタグ用のページ、シンプルリストページもあります。こうした追加ページは、ブログリストページと同じテンプレートを使用してコンテンツが表示されます。

リストページのテンプレートはブログ執筆者、タグ、簡単なリストページでも共有されるため、テンプレートに公開された更新内容もこれらのページに適用されます。

追加ページのレイアウトを個別に構成するには、if文を使用して、各タイプのページのコンテンツを条件付きでレンダリングします。

Ifblog_author

標準的なHubSpotブログリストページのマークアップには、if blog_authorステートメントが含まれます。このステートメントは、執筆者が公開した全ての記事を一覧にした執筆者の個別ページを表示する際に［true］と評価されます。ボイラープレートテンプレートには、執筆者の名前、プロフィール、およびソーシャルメディアアカウントが含まれています。

{% if blog_author %}
  <div class="blog-header">
    <div class="blog-header__inner">
      {% if blog_author.avatar %}
      <div class="blog-header__author-avatar" style="background-image: url('{{ blog_author.avatar }}');"></div>
      {% endif %}
      <h1 class="blog-header__title">{{ blog_author.display_name }}</h1>
      <h4 class="blog-header__subtitle">{{ blog_author.bio }}</h4>
      {% if blog_author.has_social_profiles %}
        <div class="blog-header__author-social-links">
          {% if blog_author.website %}
            <a href="https://developers.hubspot.jp/docs{{ blog_author.website }}" target="_blank">
              {% icon name="link" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.facebook %}
            <a href="https://developers.hubspot.jp/docs{{ blog_author.facebook }}" target="_blank">
              {% icon name="facebook-f" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.linkedin %}
            <a href="https://developers.hubspot.jp/docs{{ blog_author.linkedin }}" target="_blank">
              {% icon name="linkedin-in" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.twitter %}
            <a href="https://developers.hubspot.jp/docs{{ blog_author.twitter }}" target="_blank">
              {% icon name="twitter" style="SOLID" width="10" %}
            </a>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
{% else %}

If tag

if tagステートメントを使用すると、ブログのトピックページにのみコードをレンダリングできます。訪問者がウェブサイト上でブログトピックをクリックすると、その値が表示されます。以下の例は、ページタイトル変数を使用してタグリストページ上部にタグ名を自動出力するスニペットです。

{% if tag %}
    <h3>Posts about {{ page_meta.html_title|split(" | ")|last }}</h3>
{% endif %}

If not simple_list_page

ブログ記事の一覧を表示するためにレンダリングされるブログリストページには、標準のリストページとシンプルリストページの2種類があります。

標準のリストページでは、記事リストのブログ設定で指定された記事の数だけレンダリングが反復し、それに応じてページ番号も付与されます。
シンプルリストページは全ての記事の一覧で、ページ番号には対応していません。シンプルリストページは、ブログ設定の記事数制限の影響を受けることなく、通常は直近200件のブログ記事へのリンクが格納されます。シンプルリストページのアドレスは、ブログURLのパスの末尾に/allを追加したものです。

if not simple_list_pageステートメントを使用して、シンプルリストページと標準のリストページのどちらをレンダリングするかを指定できます。このステートメントを簡略化したものを以下でご参照ください。

このif文ではロジックが反転している点にご注意ください。つまり、elseでシンプルリストビューを定義しています。必要に応じて、代わりにunless文を使用することもできます。

{% if not simple_list_page %}
    Iterated post markup for regular listing
{% else %}
    <h2 class="post-listing-simple"><a href="https://developers.hubspot.jp/docs{{content.absolute_url}}">{{ content.name }}</a></h2>
{% endif %}

リストのページ送り

ブログリストページではページ番号が自動生成されます。リストページテンプレートには、訪問者がブログ記事内でページを簡単に切り替えられるようにするロジックを含めることが可能です。ボイラープレートのブログでは、次のマークアップを使って数値によるシンプルなページ送りを実現しています。

{% if contents.total_page_count > 1 %}
<div class="blog-pagination">
    {% set page_list = [-2, -1, 0, 1, 2] %}
    {% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
    {% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
    {% elif current_page_num == 2 %}{% set offset = 1 %}
    {% elif current_page_num == 1 %}{% set offset = 2 %}
    {% else %}{% set offset = 0 %}{% endif %}

    <a class="blog-pagination__link blog-pagination__prev-link {{ "blog-pagination__prev-link--disabled" if !last_page_num }}" href="https://developers.hubspot.jp/docs{{ blog_page_link(last_page_num) }}">
    {% icon name="chevron-left" style="SOLID", width="13", no_wrapper=True %}
    Prev
    </a>
    {% for page in page_list %}
    {% set this_page = current_page_num + page + offset %}
    {% if this_page > 0 and this_page <= contents.total_page_count %}
        <a class="blog-pagination__link blog-pagination__number-link {{ "blog-pagination__link--active" if this_page == current_page_num }}" href="https://developers.hubspot.jp/docs{{ blog_page_link(this_page) }}">{{ this_page }}</a>
    {% endif %}
    {% endfor %}
    <a class="blog-pagination__link blog-pagination__next-link {{ "blog-pagination__next-link--disabled" if !next_page_num }}" href="https://developers.hubspot.jp/docs{{ blog_page_link(current_page_num + 1) }}">
    Next
    {% icon name="chevron-right" style="SOLID", width="13", no_wrapper=True %}
    </a>
</div>
{% endif %}

ボイラープレートマークアップ

以下で、ブログ記事とブログリストページテンプレートのボイラープレートマークアップをご覧ください。各セクションに記載されているように、GitHubのCMSボイラープレートでこのマークアップを表示することもできます。

記事テンプレートマークアップ

ブログ内の全てのブログ記事は、1つのブログテンプレートによって生成されます。 Contentは、リクエストされたブログ記事に関する情報を含む事前定義されたデータオブジェクトです。ボイラープレート記事は、次のマークアップを使ってレンダリングされます。

<div class="content-wrapper">
  <div class="blog-post">
    <h1>{{ content.name }}</h1>
    <div class="blog-post__meta">
      <a href="https://developers.hubspot.jp/docs{{ blog_author_url(group.id, content.blog_post_author.slug) }}">
        {{ content.blog_post_author.display_name }}
      </a>
      <div class="blog-post__timestamp">
        {{ content.publish_date_localized }}
      </div>
    </div>
    <div class="blog-post__body">
      {{ content.post_body }}
    </div>
    {% if content.tag_list %}
    <div class="blog-post__tags">
      {% icon name="tag" style="SOLID" %}
      {% for tag in content.tag_list %}
        <a class="blog-post__tag-link" href="https://developers.hubspot.jp/docs{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>{% if not loop.last %},{% endif %}
      {% endfor %}
    </div>
    {% endif %}
  </div>
  <div class="blog-comments">
    {% module "blog_comments" path="@hubspot/blog_comments", label="Blog Comments" %}
  </div>
</div>

また、ブログ記事の執筆者情報もcontentcontentデータの中に含まれます。

<img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}">
<h3>Written by <a class="author-link" href="https://developers.hubspot.jp/docs{{ blog_author_url(group.id, content.blog_post_author.slug) }}">{{ content.blog_post_author.display_name }}</a></h3>
<p>{{ content.blog_post_author.bio }}</p>
{% if content.blog_post_author.has_social_profiles %}
    <div class="hs-author-social-section">
        <div class="hs-author-social-links">
            {% if content.blog_post_author.facebook %}
                <a href="https://developers.hubspot.jp/docs{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook</a>
            {% endif %}
            {% if content.blog_post_author.linkedin %}
                <a href="https://developers.hubspot.jp/docs{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>
            {% endif %}
            {% if content.blog_post_author.twitter %}
                <a href="https://developers.hubspot.jp/docs{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter</a>
            {% endif %}
            {% if content.blog_post_author.google_plus %}
                <a href="https://developers.hubspot.jp/docs{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>
            {% endif %}
        </div>
    </div>
{% endif %}

リストページテンプレートのマークアップ

ボイラープレートブログリストページのコンテンツのforループは、次のマークアップによってレンダリングされます。

{% for content in contents %}
    {# On the blog homepage the first post will be featured above older posts #}
    {% if (loop.first && current_page_num == 1 && !topic) %}
    <div class="blog-index__post blog-index__post--large">
        <a class="blog-index__post-image blog-index__post-image--large"
        {% if content.featured_image %}
            style="background-image: url('{{ content.featured_image }}')";
        {% endif %}
        href="https://developers.hubspot.jp/docs{{ content.absolute_url }}"></a>
        <div class="blog-index__post-content  blog-index__post-content--large">
        <h2><a href="https://developers.hubspot.jp/docs{{ content.absolute_url }}">{{ content.name }}</a></h2>
        {{ content.post_list_content }}
        </div>
    </div>
    {% else %}
    <div class="blog-index__post blog-index__post--small">
        <a class="blog-index__post-image blog-index__post-image--small"
        {% if content.featured_image %}
            style="background-image: url('{{ content.featured_image }}')";
        {% endif %}
        href="https://developers.hubspot.jp/docs{{ content.absolute_url }}"></a>
        <div class="blog-index__post-content  blog-index__post-content--small">
        <h2><a href="https://developers.hubspot.jp/docs{{ content.absolute_url }}">{{ content.name }}</a></h2>
        {{ content.post_list_content|truncatehtml(100) }}
        </div>
    </div>
    {% endif %}
{% endfor %}

Start Building

Reference

Best Practices

Marketplace

Versions & Deprecations

ブログテンプレート

リストページと記事の共通テンプレートを作成する

リストページ用と記事用に個別のテンプレートを作成する

リストページテンプレート

ブログリストページモジュールを作成する

ブログ執筆者、タグ、シンプルリストページ

Ifblog_author

If tag

If not simple_list_page

リストのページ送り

ボイラープレートマークアップ

記事テンプレートマークアップ

リストページテンプレートのマークアップ

関連コンテンツ

​リストページと記事の共通テンプレートを作成する

​リストページ用と記事用に個別のテンプレートを作成する

​リスト ページ テンプレート

​ブログ リスト ページ モジュールを作成する

​ブログ執筆者、タグ、シンプル リスト ページ

​Ifblog_author

​If tag

​If not simple_list_page

​リストのページ送り

​ボイラープレートマークアップ

​記事テンプレートマークアップ

​リスト ページ テンプレートのマークアップ

​関連コンテンツ

リストページと記事の共通テンプレートを作成する

リストページ用と記事用に個別のテンプレートを作成する

リストページテンプレート

ブログリストページモジュールを作成する

ブログ執筆者、タグ、シンプルリストページ

Ifblog_author

If tag

If not simple_list_page

リストのページ送り

ボイラープレートマークアップ

記事テンプレートマークアップ

リストページテンプレートのマークアップ

関連コンテンツ