如何使用 HubSpot 的 HubL 为数组赋值

Question

我目前正试图弄清楚如何允许内容管理器更改元素在最近的帖子链接列表中出现的顺序。从本质上讲，这个概念涉及他们在排序数组中选择索引，该数组将该元素的类型保存为字符串，稍后将通过输出逻辑迭代确定每个片段的放置位置。不幸的是，使用 HubL 的缺点之一是缺乏调试或错误报告，所以我看不出我的语法在哪里失败。我想知道 InternetLand 中是否有人有过类似的经历。

这是 HubL：

<div class="theme-recent-posts">
  {% if widget.title_name %}
    <div class="theme-recent-posts-title">
      <{{ widget.title_tag }}><span>{{ widget.title_name }}</span></{{ widget.title_tag }}>
    </div>
  {% endif %}
  {% set posts = blog_recent_posts(widget.select_blog, widget.max_links) %}
  {% for post in posts %}
    {% set item_objects = [] %}
    {% if widget.show_images == "true" %}
      {% set item_objects[widget.sort_images] = "image" %}
    {% endif %}
    {% if widget.show_titles == "true" %}
      {% set item_objects[widget.sort_titles] = "title" %}
    {% endif %}
    {% if widget.show_dates == "true" %}
      {% set item_objects[widget.sort_dates] = "date" %}
    {% endif %}
    {% if widget.show_authors == "true" %}
      {% set item_objects[widget.sort_authors] = "author" %}
    {% endif %}
    <div class="theme-recent-posts-item">
      <a href="{{ post.absolute_url }}">
        {% for object in item_objects %}
          {% if object == "image" %}
            <span class="theme-recent-posts-item-image"><img src="{{ post.featured_image }}" alt="{{ post.name }}" /></span>
          {% endif %}
          {% if object == "title" %}
            <span class="theme-recent-posts-item-title">{{ post.name }}</span>
          {% endif %}
          {% if object == "date" %}
            <span class="theme-recent-posts-item-date">{{ post.created }}</span>
          {% endif %}
          {% if object == "author" %}
            <span class="theme-recent-posts-item-author">{{ post.author_name }}</span>
          {% endif %}
        {% endfor %}
      </a>
    </div>
  {% endfor %}
</div>

当前的输出结果为：

<div class="theme-recent-posts">
  <div class="theme-recent-posts-title">
    <h2><span>Recent Posts</span></h2>
  </div>
  <div class="theme-recent-posts-item">
    <a href="//website/path/post-name-3"></a>
  </div>
  <div class="theme-recent-posts-item">
    <a href="//website/path/post-name-2"></a>
  </div>
  <div class="theme-recent-posts-item">
    <a href="//website/path/post-name-1"></a>
  </div>
</div>

假设在小部件面板中连接了默认值：

widget.show_images = true
widget.show_images = true
widget.show_images = true
widget.show_images = true
widget.sort_images = 0
widget.sort_titles = 1
widget.sort_dates = 2
widget.sort_authors = 3

输出基本上应该是这样的：

<div class="theme-recent-posts">
  <div class="theme-recent-posts-title">
    <h2><span>Recent Posts</span></h2>
  </div>
  <div class="theme-recent-posts-item">
    <a href="//website/path/post-name-3">
      <span class="theme-recent-posts-item-image"><img src="path/to/image-3.ext" alt="Post Name 3" /></span>
      <span class="theme-recent-posts-item-title">Post Name 3</span>
      <span class="theme-recent-posts-item-date">1234567890</span>
      <span class="theme-recent-posts-item-author">FirstName LastName</span>
    </a>
  </div>
  <div class="theme-recent-posts-item">
    <a href="//website/path/post-name-2">
      <span class="theme-recent-posts-item-image"><img src="path/to/image-2.ext" alt="Post Name 2" /></span>
      <span class="theme-recent-posts-item-title">Post Name 2</span>
      <span class="theme-recent-posts-item-date">1234567890</span>
      <span class="theme-recent-posts-item-author">FirstName LastName</span>
    </a>
  </div>
  <div class="theme-recent-posts-item">
    <a href="//website/path/post-name-1">
      <span class="theme-recent-posts-item-image"><img src="path/to/image-1.ext" alt="Post Name 1" /></span>
      <span class="theme-recent-posts-item-title">Post Name 1</span>
      <span class="theme-recent-posts-item-date">1234567890</span>
      <span class="theme-recent-posts-item-author">FirstName LastName</span>
    </a>
  </div>
</div>

我将在这篇文章中标记 Jinja，因为 HubL 是基于 Jinja 的，虽然它不是直接翻译。

如果有足够声誉的人正在阅读本文，我将非常感谢添加 HubL 语言标签，因为它目前不存在可供选择（即使 HubSpot 存在）。

更新

Twig 也是 HubL 的近亲，所以我在那里查找了如何更新数组中的元素，并得出了这个答案：

Setting element of array from Twig

{% set item_objects = item_objects|merge({widget.sort_images:"image"}) %}

实施未按预期工作。输出保持不变。

Answer 1

虽然这不是我提出的问题的答案，但它是一种替代解决方案，因此我将其作为一种解决方案提供，直到确定真正的解决方案。

<div class="theme-recent-posts">

  {% if widget.title_name %}
    <div class="theme-recent-posts-title">
      <{{ widget.title_tag }}><span>{{ widget.title_name }}</span></{{ widget.title_tag }}>
    </div>
  {% endif %}

  {% set object_order = [0, 1, 2, 3] %}
  {% set posts = blog_recent_posts(widget.select_blog, widget.max_links) %}

  {% for post in posts %}
    <div class="theme-recent-posts-item">
      <a href="{{ post.absolute_url }}">
        {% for order in object_order %}
          {% if widget.show_images == "true" and widget.sort_images == order %}
            <span class="theme-recent-posts-item-image"><img src="{{ post.featured_image }}" alt="{{ post.name }}" /></span>
          {% endif %}
          {% if widget.show_titles == "true" and widget.sort_titles == order %}
            <span class="theme-recent-posts-item-title">{{ post.name }}</span>
          {% endif %}
          {% if widget.show_dates == "true" and widget.sort_dates == order %}
            <span class="theme-recent-posts-item-date">{{ post.created }}</span>
          {% endif %}
          {% if widget.show_authors == "true" and widget.sort_authors == order %}
            <span class="theme-recent-posts-item-author">{{ post.author_name }}</span>
          {% endif %}
        {% endfor %}
      </a>
    </div>
  {% endfor %}

</div>

这为我提供了我一直在寻找的灵活性，并且代码实际上比最初提出的方法减轻了很多。这个想法是使用object_order 列表作为for order in object_order 循环的掩码。这样就完成了工作，虽然我知道它很老套，但它有一点优雅。