Hubspot博客列表页调试：置顶最新Featured文章+首条标题设置

需求说明 #

需要实现两个核心功能：

• 页面顶部固定展示1篇最新的Featured标记文章
• 普通文章区域仅在第一篇卡片上方显示「Recent Posts」标题，禁止重复渲染

当前问题 #

页面可展示最新文章，但上述两个需求均未实现，以下是当前代码：

{% set featured_posts = blog_recent_topic_posts('default', 'featured', 1) %}
{% for post in featured_posts %}
  {% for topic in post.topic_list %}
    {% if topic.name == 'featured' %}
      <section class="blog-index-list">
        <article class="blog-index__post-wrapper-list-">
          <div class="blog-index__post-list">
            {% if post.featured_image and group.use_featured_image_in_summary %}
              <a class="blog-index__post-image-list" 
                 style="background-image: url('{{ post.featured_image }}');" 
                 href="{{ post.absolute_url }}">
              </a>
            {% endif %}
            <div class="blog-index__post-content-list">
              <div>
                {% set featured_tag = post.topic_list | first %}
                {% if featured_tag %}
                  <span class="blog-index__post-preheader-list">{{ featured_tag }}</span>
                {% endif %}
                                 <div class="blog-index__post-meta-list">
                  <span class="blog-index__post-author-list">
                    {{ post.blog_post_author }} |
                  </span>
                  <span class="blog-index__post-date-list">
                    {{ post.publish_date | datetimeformat('%b %e, %Y') }}
                  </span>
                
                </div>
                <h3><div class="blog-title"><a href="{{ post.absolute_url }}">{{ post.name }}</a></div></h3>
                {% if content_group.show_summary_in_listing %}
                  <div class="meta-description">{{ post.meta_description | default(post.post_summary, true) | truncatehtml(250, '...', false) }}</div> 
                {% endif %}
              </div>
              <a href="{{ post.absolute_url }}"> <button class="blog-button-cta"> Read More </button> </a>
            </div>
          </div>
        </article>
      </section>
    {% endif %}
  {% endfor %}
{% endfor %}

{# Blog listing #}
{% set remaining_posts = contents | sort(attribute='publish_date', reverse=True) %}
{% for content in remaining_posts %}
  {# On the blog listing page, the first post will be featured above older posts #}
  <article class="blog-index__post-wrapper-list">
    <div class="blog-index__post-list">
      {% if content.featured_image and group.use_featured_image_in_summary %}
        <a class="blog-index__post-image-list" 
               style="background-image: url('{{ content.featured_image }}');" 
               href="{{ content.absolute_url }}">
            </a>
            {% endif %}
            <div class="blog-index__post-content-list">
              <div>
                {% set featured_tag = content.topic_list | first %}
                {% if featured_tag %}
                <span class="blog-index__post-preheader-list">{{ featured_tag }}</span>
                {% endif %}
                
                <h3><div class="blog-title"><a href="{{ content.absolute_url }}">{{ content.name }}</a></div></h3>
              <div class="blog-index__post-meta-list">
                <span class="blog-index__post-author-list">
                  {{ content.blog_post_author }} |
                </span>
                <span class="blog-index__post-date-list">
                  {{ content.publish_date | datetimeformat('%b %e, %Y') }}
                </span>
                
              </div>
                {% if content_group.show_summary_in_listing %}
                <div class="meta-description">{{ content.meta_description | default(content.post_summary, true) | truncatehtml(250, '...', false) }}</div> 
                {% endif %}
              </div>

              
                {#<a href="{{ content.absolute_url }}"> <button class="blog-button-cta"> Read More </button> </a> #}
              
            </div>
            <a href="{{ content.absolute_url }}"> <button class="blog-button-cta"> Read More </button> </a>
          </div>
        </article>
        {% endfor %}

修复方案与代码 #

核心修改点 #

1. 简化Featured文章渲染逻辑：移除冗余的标签遍历判断，直接渲染blog_recent_topic_posts返回的文章（已筛选带featured标签的最新1篇）
2. 添加「Recent Posts」标题：仅在有普通文章时显示标题，避免无文章时出现空标题
3. 排除重复文章：从普通文章列表中移除已展示的Featured文章，避免重复显示

修复后的完整代码：

{# 顶部展示1篇最新的Featured文章 #}
{% set featured_posts = blog_recent_topic_posts('default', 'featured', 1) %}
{% for post in featured_posts %}
  <section class="blog-index-list">
    <article class="blog-index__post-wrapper-list-">
      <div class="blog-index__post-list">
        {% if post.featured_image and group.use_featured_image_in_summary %}
          <a class="blog-index__post-image-list" 
             style="background-image: url('{{ post.featured_image }}');" 
             href="{{ post.absolute_url }}">
          </a>
        {% endif %}
        <div class="blog-index__post-content-list">
          <div>
            {% set featured_tag = post.topic_list | first %}
            {% if featured_tag %}
              <span class="blog-index__post-preheader-list">{{ featured_tag }}</span>
            {% endif %}
            <div class="blog-index__post-meta-list">
              <span class="blog-index__post-author-list">
                {{ post.blog_post_author }} |
              </span>
              <span class="blog-index__post-date-list">
                {{ post.publish_date | datetimeformat('%b %e, %Y') }}
              </span>
            </div>
            <h3><div class="blog-title"><a href="{{ post.absolute_url }}">{{ post.name }}</a></div></h3>
            {% if content_group.show_summary_in_listing %}
              <div class="meta-description">{{ post.meta_description | default(post.post_summary, true) | truncatehtml(250, '...', false) }}</div> 
            {% endif %}
          </div>
          <a href="{{ post.absolute_url }}"> <button class="blog-button-cta"> Read More </button> </a>
        </div>
      </div>
    </article>
  </section>
{% endfor %}

{# 普通文章列表：排除Featured文章，添加标题到列表上方 #}
{% set featured_post_ids = featured_posts | map(attribute='id') | list %}
{% set remaining_posts = contents | sort(attribute='publish_date', reverse=True) | rejectattr('id', 'in', featured_post_ids) %}

{% if remaining_posts %}
  <h2 class="recent-posts-title">Recent Posts</h2>
  {% for content in remaining_posts %}
    <article class="blog-index__post-wrapper-list">
      <div class="blog-index__post-list">
        {% if content.featured_image and group.use_featured_image_in_summary %}
          <a class="blog-index__post-image-list" 
             style="background-image: url('{{ content.featured_image }}');" 
             href="{{ content.absolute_url }}">
          </a>
        {% endif %}
        <div class="blog-index__post-content-list">
          <div>
            {% set featured_tag = content.topic_list | first %}
            {% if featured_tag %}
              <span class="blog-index__post-preheader-list">{{ featured_tag }}</span>
            {% endif %}
            
            <h3><div class="blog-title"><a href="{{ content.absolute_url }}">{{ content.name }}</a></div></h3>
            <div class="blog-index__post-meta-list">
              <span class="blog-index__post-author-list">
                {{ content.blog_post_author }} |
              </span>
              <span class="blog-index__post-date-list">
                {{ content.publish_date | datetimeformat('%b %e, %Y') }}
              </span>
            </div>
            {% if content_group.show_summary_in_listing %}
              <div class="meta-description">{{ content.meta_description | default(content.post_summary, true) | truncatehtml(250, '...', false) }}</div> 
            {% endif %}
          </div>
          <a href="{{ content.absolute_url }}"> <button class="blog-button-cta"> Read More </button> </a>
        </div>
      </div>
    </article>
  {% endfor %}
{% endif %}

说明 #

• 移除原代码中嵌套的topic循环判断，因为blog_recent_topic_posts已返回带指定标签的文章，无需二次校验
• 通过featured_post_ids收集已展示的Featured文章ID，用rejectattr从普通列表中排除，避免重复展示
• 「Recent Posts」标题仅在有普通文章时显示，避免无内容时出现空标题
• 保留原有样式类和结构，确保与现有样式兼容

内容的提问来源于stack exchange，提问作者Jess Y.