Other - 2020-08-24

HubSpotのブログで最新記事を表示する方法

全てのHubLのコード

{% set rec_posts = blog_recent_posts('default', 5) %}
<div class="recent">
  <h2 class="recent-title">人気記事</h2>
  {% for rec_post in rec_posts %}
  <a href="{{rec_post.absolute_url}}" class="recent-articles">
    {% if rec_post.post_list_summary_featured_image %}
    <img src="{{ rec_post.post_list_summary_featured_image }}" class="recent-articles-image" alt="{{ rec_post.featured_image_alt_text | escape }}">
    {% endif %}
    <h3 class="recent-articles-title">{{ rec_post.name }}</h3>
    <p class="post-header-title-data">記事公開日: {{ rec_post.publish_date_local_time.strftime('%Y.%m.%d') }}</p>
    <p>{{ rec_post.post_body|truncate(31, True, '…' ) }}</p>
  </a>
  {% endfor %}
  {% if rec_post.topic_list %}
  <p id="recent-articles-topic"> トピック:
    {% for topic in rec_post.topic_list %}
    <a class="recent-articles-topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>
    {% endfor %}
  </p>
  {% endif %}
</div>

個別のHubLのコード

人気記事の取得方法

{% set rec_posts = blog_recent_posts('default', 5) %}
{% for rec_post in rec_posts %}
  //中身
{% endfor %}

タイトルの取得方法

<h3 class="recent-articles-title">{{ rec_post.name }}</h3>

記事公開日の取得方法

<p class="post-header-title-data">記事公開日: {{ rec_post.publish_date_local_time.strftime('%Y.%m.%d') }}</p>

記事URLの取得方法

<a href="{{rec_post.absolute_url}}" class="recent-articles"></a>

本文の取得方法

<p>{{ rec_post.post_body|truncate(31, True, '…' ) }}</p>

サムネイルの取得方法

{% if rec_post.post_list_summary_featured_image %}
<img src="{{ rec_post.post_list_summary_featured_image }}" class="recent-articles-image" alt="{{ rec_post.featured_image_alt_text | escape }}">
{% endif %}

トピック(タグ)の取得方法

{% if rec_post.topic_list %}
<p id="recent-articles-topic"> トピック:
  {% for topic in rec_post.topic_list %}
  <a class="recent-articles-topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>
  {% endfor %}
</p>
{% endif %}