ブログ テンプレート マークアップ

APPLICABLE PRODUCTS
  • Marketing Hub
    • Professional or Enterprise
  • CMS Hub
    • Professional or Enterprise

HubSpotのブログは、ブログ リスト ページと個別のブログ記事で構成されます。個別のブログ記事のリストに加えて、執筆者およびタグのリストページのレンダリングにもリストテンプレートが使用されます。全てのリストとブログ リスト ページをレンダリングする1つのテンプレートを作成することも、2つの個別のテンプレートを作成することもできます。 

この記事では、ブログ テンプレート マークアップ、テンプレートのコンポーネント、カスタマイズオプションについて説明します。

リストページと記事を1つのテンプレートでレンダリングする

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

このif文内に、記事とリストの両方のコードを記述します。

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

または、ブログ記事リストページに別個のテンプレートを作ることもできます。これにより、開発者にとってはコードが明確で読みやすくなり、制作担当者にとってはテンプレートを選びやすくなります。CMSボイラープレートには、別個のリストテンプレート記事テンプレートがあります。記事テンプレートとリストテンプレートを分けて作成する場合、このis_listing_viewチェックは不要ですが、[設定]>[ウェブサイト]>[ブログ]>[テンプレート]では別個のテンプレートを必ず選択してください。 

ブログ設定テンプレートの選択

ブログリストのforループ

記事のリストは、記事を反復処理するforループによって生成されます。Contentsは、そのブログ内の全ての記事を含むコンテンツの事前定義済みシーケンスです。

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

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

ボイラープレート ブログ リスト ページのコンテンツの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="{{ content.absolute_url }}"></a> <div class="blog-index__post-content blog-index__post-content--large"> <h2><a href="{{ 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="{{ content.absolute_url }}"></a> <div class="blog-index__post-content blog-index__post-content--small"> <h2><a href="{{ content.absolute_url }}">{{ content.name }}</a></h2> {{ content.post_list_content|truncatehtml(100) }} </div> </div> {% endif %} {% endfor %}

if blog_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="{{ blog_author.website }}" target="_blank"> {% icon name="link" style="SOLID" width="10" %} </a> {% endif %} {% if blog_author.facebook %} <a href="{{ blog_author.facebook }}" target="_blank"> {% icon name="facebook-f" style="SOLID" width="10" %} </a> {% endif %} {% if blog_author.linkedin %} <a href="{{ blog_author.linkedin }}" target="_blank"> {% icon name="linkedin-in" style="SOLID" width="10" %} </a> {% endif %} {% if blog_author.twitter %} <a href="{{ blog_author.twitter }}" target="_blank"> {% icon name="twitter" style="SOLID" width="10" %} </a> {% endif %} </div> {% endif %} </div> </div> {% else %}

if tag文

執筆者リストページでのみ表示されるマークアップを定義するif blog_author文に加えて、ブログ トピック リスト ページのコードのみを表示するために使用できるtag変数もあります。以下に、ページタイトル変数を使用してタグ リスト ページ上部にタグ名を自動出力するスニペットの例を示します。このスニペットはご使用のブログ リスト コードにも追加できます。

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

if not simple_list_page文

forループ内には、シンプルリストと正規リストで何を表示するかを決定するif文があります。シンプルリストは、全ての記事のリストです。シンプルリストは、ブログ設定の記事数制限の影響を受けることなく、通常は直近200件のブログ記事へのリンクが格納されます。シンプルリストのページには、通常のリストビューのようにページ番号を付けることができます。標準のリストは、コンテンツ設定で指定された記事の数だけ繰り返され、ページ番号が付けられます。シンプル リスト ページのアドレスは、ブログURLのパスの末尾に/allを追加したものです。

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

{% if not simple_list_page %} Iterated post markup for regular listing {% else %} <h2 class="post-listing-simple"><a href="{{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="{{ 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="{{ 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="{{ blog_page_link(current_page_num + 1) }}"> Next {% icon name="chevron-right" style="SOLID", width="13", no_wrapper=True %} </a> </div> {% endif %}

ブログ記事のマークアップ

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

<div class="content-wrapper"> <div class="blog-post"> <h1>{{ content.name }}</h1> <div class="blog-post__meta"> <a href="{{ 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="{{ 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>

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

<img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}"> <h3>Written by <a class="author-link" href="{{ 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="{{ 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="{{ 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="{{ 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="{{ 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 %}

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